<template>
  <div class="history-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-nav">
        <div class="nav-left">
          <!-- <a-button type="text" @click="goBack" class="back-btn">
            <ArrowLeftOutlined />
            <span>返回</span>
          </a-button> -->

          <div class="breadcrumb">
            <router-link to="/dashboard" class="breadcrumb-item">
              <HomeOutlined />
              <span>工作台</span>
            </router-link>
            <span class="breadcrumb-separator">/</span>
            <router-link to="/reincarnation" class="breadcrumb-item">轮回转世系统</router-link>
            <span class="breadcrumb-separator">/</span>
            <span class="breadcrumb-item current">轮回历史记录</span>
          </div>
        </div>
      </div>

      <div class="header-content">
        <div class="header-main">
          <h1 class="page-title">轮回历史记录</h1>
          <p class="page-description">历代转世追踪 · 前世今生关联 · 修行进度统计</p>
        </div>

        <div class="header-actions">
          <a-button type="primary">
            <ExportOutlined />
            导出记录
          </a-button>
          <a-button>
            <FilterOutlined />
            高级筛选
          </a-button>
        </div>
      </div>
    </div>

    <!-- 统计概览 -->
    <div class="stats-overview">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :md="6">
          <div class="stat-card">
            <div class="stat-icon">
              <HistoryOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ totalRecords?.toLocaleString() }}</div>
              <div class="stat-label">总记录数</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :md="6">
          <div class="stat-card">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ uniqueSouls?.toLocaleString() }}</div>
              <div class="stat-label">独立生灵</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :md="6">
          <div class="stat-card">
            <div class="stat-icon">
              <BarChartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ averageCycles.toFixed(1) }}</div>
              <div class="stat-label">平均轮回数</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :md="6">
          <div class="stat-card">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ progressRate }}%</div>
              <div class="stat-label">修行进步率</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能标签页 -->
    <div class="content-tabs">
      <a-tabs v-model:activeKey="activeTab" type="card">
        <a-tab-pane key="records" tab="历代转世记录">
          <div class="tab-content">
            <!-- 筛选器 -->
            <div class="filters">
              <a-space wrap>
                <a-select v-model:value="realmFilter" placeholder="道别筛选" style="width: 120px" allowClear>
                  <a-select-option value="">全部道别</a-select-option>
                  <a-select-option value="天道">天道</a-select-option>
                  <a-select-option value="人道">人道</a-select-option>
                  <a-select-option value="阿修罗道">阿修罗道</a-select-option>
                  <a-select-option value="畜生道">畜生道</a-select-option>
                  <a-select-option value="饿鬼道">饿鬼道</a-select-option>
                  <a-select-option value="地狱道">地狱道</a-select-option>
                </a-select>

                <a-range-picker v-model:value="dateRange" :placeholder="['开始时间', '结束时间']" />

                <a-select v-model:value="karmaRangeFilter" placeholder="业力范围" style="width: 120px" allowClear>
                  <a-select-option value="">全部范围</a-select-option>
                  <a-select-option value="90-100">90-100(圣者)</a-select-option>
                  <a-select-option value="80-89">80-89(善人)</a-select-option>
                  <a-select-option value="60-79">60-79(良民)</a-select-option>
                  <a-select-option value="40-59">40-59(普通)</a-select-option>
                  <a-select-option value="0-39">0-39(罪人)</a-select-option>
                </a-select>
              </a-space>
            </div>

            <!-- 记录列表 -->
            <div class="records-list">
              <div v-for="record in filteredRecords" :key="record.id" class="record-item">
                <div class="record-header">
                  <div class="soul-info">
                    <div class="soul-avatar">
                      <a-avatar :style="{ backgroundColor: getKarmaColor(record.karma) }">
                        {{ record.name.charAt(0) }}
                      </a-avatar>
                    </div>
                    <div class="soul-details">
                      <div class="soul-name">{{ record.name }}</div>
                      <div class="soul-id">ID: {{ record.soulId }}</div>
                    </div>
                  </div>
                  <div class="record-meta">
                    <div class="cycle-info">第{{ record.cycle }}世</div>
                    <div class="record-time">{{ record.reincarnationTime }}</div>
                  </div>
                </div>

                <div class="record-content">
                  <div class="life-journey">
                    <div class="journey-step">
                      <div class="step-icon from" :style="{ backgroundColor: getRealmColor(record.fromRealm) }">
                        {{ getRealmIcon(record.fromRealm) }}
                      </div>
                      <div class="step-content">
                        <div class="step-title">前世</div>
                        <div class="step-details">{{ record.fromRealm }} · {{ record.previousLife }}</div>
                        <div class="step-karma">业力: {{ record.previousKarma }}</div>
                      </div>
                    </div>

                    <div class="journey-arrow">
                      <ArrowRightOutlined />
                    </div>

                    <div class="journey-step">
                      <div class="step-icon to" :style="{ backgroundColor: getRealmColor(record.toRealm) }">
                        {{ getRealmIcon(record.toRealm) }}
                      </div>
                      <div class="step-content">
                        <div class="step-title">今世</div>
                        <div class="step-details">{{ record.toRealm }} · {{ record.currentLife }}</div>
                        <div class="step-karma">业力: {{ record.karma }}</div>
                      </div>
                    </div>
                  </div>

                  <div class="record-details">
                    <div class="detail-item">
                      <span class="detail-label">转世原因：</span>
                      <span class="detail-value">{{ record.reason }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="detail-label">业力变化：</span>
                      <span class="detail-value" :class="getKarmaChangeClass(record.karmaChange)"> {{ record.karmaChange > 0 ? '+' : '' }}{{ record.karmaChange }} </span>
                    </div>
                    <div class="detail-item">
                      <span class="detail-label">特殊事件：</span>
                      <span class="detail-value">{{ record.specialEvents || '无' }}</span>
                    </div>
                  </div>
                </div>

                <div class="record-actions">
                  <a-button type="text" size="small" @click="viewDetailHistory(record)"> 查看详情 </a-button>
                  <a-button type="text" size="small" @click="viewRelationships(record)"> 关系网络 </a-button>
                  <a-button type="text" size="small" @click="viewProgress(record)"> 修行进度 </a-button>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane key="relationships" tab="前世今生关系">
          <div class="tab-content">
            <div class="relationship-network">
              <div class="network-header">
                <h4>生灵关系网络图</h4>
                <a-space>
                  <a-input-search v-model:value="relationshipSearchQuery" placeholder="搜索生灵姓名、关系类型..." style="width: 300px" @search="searchRelationships" allowClear />
                  <a-select v-model:value="relationshipTypeFilter" placeholder="关系类型筛选" style="width: 150px" allowClear>
                    <a-select-option value="">全部关系</a-select-option>
                    <a-select-option value="夫妻关系">夫妻关系</a-select-option>
                    <a-select-option value="父子关系">父子关系</a-select-option>
                    <a-select-option value="母子关系">母子关系</a-select-option>
                    <a-select-option value="师徒关系">师徒关系</a-select-option>
                    <a-select-option value="兄弟关系">兄弟关系</a-select-option>
                    <a-select-option value="朋友关系">朋友关系</a-select-option>
                    <a-select-option value="主仆关系">主仆关系</a-select-option>
                    <a-select-option value="冤债关系">冤债关系</a-select-option>
                    <a-select-option value="战友关系">战友关系</a-select-option>
                    <a-select-option value="宿敌关系">宿敌关系</a-select-option>
                  </a-select>
                  <a-select v-model:value="relationshipKarmaFilter" placeholder="业力筛选" style="width: 120px" allowClear>
                    <a-select-option value="">全部业力</a-select-option>
                    <a-select-option value="90-100">90-100(圣者)</a-select-option>
                    <a-select-option value="80-89">80-89(善人)</a-select-option>
                    <a-select-option value="60-79">60-79(良民)</a-select-option>
                    <a-select-option value="40-59">40-59(普通)</a-select-option>
                    <a-select-option value="0-39">0-39(罪人)</a-select-option>
                  </a-select>
                </a-space>
              </div>

              <div class="network-content">
                <div class="relationship-tree">
                  <div class="soul-group" v-for="soulGroup in filteredAllRelationships" :key="soulGroup.soulId">
                    <div class="soul-center">
                      <div class="center-card">
                        <div class="center-avatar">
                          <a-avatar :style="{ backgroundColor: getKarmaColor(soulGroup.karma) }" size="large">
                            {{ soulGroup.name.charAt(0) }}
                          </a-avatar>
                        </div>
                        <div class="center-info">
                          <div class="center-name">{{ soulGroup.name }}</div>
                          <div class="center-id">{{ soulGroup.soulId }}</div>
                          <div class="center-karma">业力: {{ soulGroup.karma }}</div>
                          <div class="center-cycles">轮回: {{ soulGroup.totalCycles }}世</div>
                        </div>
                      </div>
                    </div>

                    <div class="relationships-list">
                      <div class="tree-node" v-for="relationship in soulGroup.relationships" :key="relationship.id">
                        <div class="node-card">
                          <div class="node-avatar">
                            <a-avatar :style="{ backgroundColor: getKarmaColor(relationship.karma) }">
                              {{ relationship.name.charAt(0) }}
                            </a-avatar>
                          </div>
                          <div class="node-info">
                            <div class="node-name">{{ relationship.name }}</div>
                            <div class="node-relation">{{ relationship.relationType }}</div>
                            <div class="node-cycles">{{ relationship.sharedCycles }}世交集</div>
                            <div class="node-karma">业力: {{ relationship.karma }}</div>
                            <div class="node-description">{{ relationship.description }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane key="statistics" tab="轮回统计">
          <div class="tab-content">
            <a-row :gutter="[24, 24]">
              <a-col :xs="24" :lg="12">
                <div class="stat-section">
                  <h4>轮回次数分布</h4>
                  <div class="cycle-distribution">
                    <div v-for="dist in cycleDistribution" :key="dist.range" class="dist-item">
                      <div class="dist-label">{{ dist.range }}世</div>
                      <div class="dist-bar">
                        <div
                          class="bar-fill"
                          :style="{
                            width: dist.percentage + '%',
                            backgroundColor: dist.color
                          }"
                        ></div>
                      </div>
                      <div class="dist-value">{{ dist.count }}人 ({{ dist.percentage }}%)</div>
                    </div>
                  </div>
                </div>
              </a-col>

              <a-col :xs="24" :lg="12">
                <div class="stat-section">
                  <h4>道别转换趋势</h4>
                  <div class="realm-transitions">
                    <div v-for="transition in realmTransitions" :key="transition.from + '-' + transition.to" class="transition-item">
                      <div class="transition-path">
                        <span class="realm-from" :style="{ color: getRealmColor(transition.from) }">
                          {{ transition.from }}
                        </span>
                        <ArrowRightOutlined class="transition-arrow" />
                        <span class="realm-to" :style="{ color: getRealmColor(transition.to) }">
                          {{ transition.to }}
                        </span>
                      </div>
                      <div class="transition-count">{{ transition.count }}次</div>
                      <div class="transition-rate">{{ transition.rate }}%</div>
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>

        <a-tab-pane key="progress" tab="修行进度">
          <div class="tab-content">
            <div class="progress-tracking">
              <div class="progress-header">
                <h4>修行进度跟踪</h4>
                <a-space>
                  <a-select v-model:value="progressTimeRange" style="width: 150px">
                    <a-select-option value="all">全部时期</a-select-option>
                    <a-select-option value="recent">近期(100世)</a-select-option>
                    <a-select-option value="ancient">远古时期</a-select-option>
                  </a-select>
                  <a-select v-model:value="progressSort" style="width: 150px">
                    <a-select-option value="progress">按进步排序</a-select-option>
                    <a-select-option value="karma">按业力排序</a-select-option>
                    <a-select-option value="cycles">按轮回数排序</a-select-option>
                  </a-select>
                </a-space>
              </div>

              <div class="progress-list">
                <div v-for="progress in sortedProgressList" :key="progress.soulId" class="progress-item">
                  <div class="progress-header">
                    <div class="soul-info">
                      <a-avatar :style="{ backgroundColor: getKarmaColor(progress.currentKarma) }">
                        {{ progress.name.charAt(0) }}
                      </a-avatar>
                      <div class="soul-details">
                        <div class="soul-name">{{ progress.name }}</div>
                        <div class="soul-stats">轮回{{ progress.totalCycles }}世 · 当前业力{{ progress.currentKarma }}</div>
                      </div>
                    </div>
                    <div class="progress-score">
                      <div class="score-value" :class="getProgressScoreClass(progress.progressScore)">{{ progress.progressScore }}分</div>
                      <div class="score-label">修行评分</div>
                    </div>
                  </div>

                  <div class="progress-content">
                    <div class="karma-trend">
                      <div class="trend-label">业力变化趋势：</div>
                      <div class="trend-chart">
                        <div
                          v-for="(point, index) in progress.karmaTrend"
                          :key="index"
                          class="trend-point"
                          :style="{
                            height: (point / 100) * 40 + 'px',
                            backgroundColor: getKarmaColor(point)
                          }"
                          :title="`第${index + 1}世: ${point}`"
                        ></div>
                      </div>
                    </div>

                    <div class="progress-details">
                      <div class="detail-row">
                        <span class="detail-label">起始业力：</span>
                        <span class="detail-value">{{ progress.initialKarma }}</span>
                      </div>
                      <div class="detail-row">
                        <span class="detail-label">最高业力：</span>
                        <span class="detail-value highlight">{{ progress.peakKarma }}</span>
                      </div>
                      <div class="detail-row">
                        <span class="detail-label">上升世数：</span>
                        <span class="detail-value success">{{ progress.ascendingCycles }}</span>
                      </div>
                      <div class="detail-row">
                        <span class="detail-label">下降世数：</span>
                        <span class="detail-value warning">{{ progress.descendingCycles }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="progress-milestones">
                    <div class="milestones-label">重要里程碑：</div>
                    <div class="milestones-list">
                      <a-tag v-for="milestone in progress.milestones" :key="milestone.cycle" :color="milestone.type === 'achievement' ? 'success' : 'warning'"> 第{{ milestone.cycle }}世: {{ milestone.description }} </a-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 详情查看弹窗 -->
    <a-modal v-model:open="detailModalVisible" title="转世历史详情" width="800px" :footer="null">
      <div v-if="selectedRecord" class="detail-modal-content">
        <div class="detail-header">
          <div class="soul-basic-info">
            <a-avatar :style="{ backgroundColor: getKarmaColor(selectedRecord.karma) }" size="large">
              {{ selectedRecord.name.charAt(0) }}
            </a-avatar>
            <div class="basic-details">
              <h3>{{ selectedRecord.name }} ({{ selectedRecord.soulId }})</h3>
              <div class="cycle-info">第{{ selectedRecord.cycle }}世转世</div>
              <div class="karma-info">当前业力：{{ selectedRecord.karma }} ({{ selectedRecord.karmaChange > 0 ? '+' : '' }}{{ selectedRecord.karmaChange }})</div>
            </div>
          </div>
          <div class="reincarnation-time">{{ selectedRecord.reincarnationTime }}</div>
        </div>

        <a-divider />

        <div class="detail-sections">
          <a-row :gutter="[24, 24]">
            <a-col :span="12">
              <div class="detail-section">
                <h4><HistoryOutlined /> 前世信息</h4>
                <div class="section-content">
                  <div class="info-item">
                    <span class="info-label">道别：</span>
                    <a-tag :color="getRealmColor(selectedRecord.fromRealm)">{{ selectedRecord.fromRealm }}</a-tag>
                  </div>
                  <div class="info-item">
                    <span class="info-label">身份：</span>
                    <span class="info-value">{{ selectedRecord.previousLife }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">业力：</span>
                    <span class="info-value">{{ selectedRecord.previousKarma }}</span>
                  </div>
                </div>
              </div>
            </a-col>

            <a-col :span="12">
              <div class="detail-section">
                <h4><UserOutlined /> 今世信息</h4>
                <div class="section-content">
                  <div class="info-item">
                    <span class="info-label">道别：</span>
                    <a-tag :color="getRealmColor(selectedRecord.toRealm)">{{ selectedRecord.toRealm }}</a-tag>
                  </div>
                  <div class="info-item">
                    <span class="info-label">身份：</span>
                    <span class="info-value">{{ selectedRecord.currentLife }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">业力：</span>
                    <span class="info-value">{{ selectedRecord.karma }}</span>
                  </div>
                </div>
              </div>
            </a-col>

            <a-col :span="24">
              <div class="detail-section">
                <h4><EnvironmentOutlined /> 生平详情</h4>
                <div class="section-content">
                  <div class="info-item">
                    <span class="info-label">寿命：</span>
                    <span class="info-value">{{ selectedRecord.lifespan }}岁</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">居住地：</span>
                    <span class="info-value">{{ selectedRecord.location }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">死因：</span>
                    <span class="info-value">{{ selectedRecord.deathCause }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">转世原因：</span>
                    <span class="info-value">{{ selectedRecord.reason }}</span>
                  </div>
                  <div v-if="selectedRecord.specialEvents" class="info-item">
                    <span class="info-label">特殊事件：</span>
                    <span class="info-value">{{ selectedRecord.specialEvents }}</span>
                  </div>
                </div>
              </div>
            </a-col>

            <a-col :span="12">
              <div class="detail-section">
                <h4><TrophyOutlined /> 成就事迹</h4>
                <div class="section-content">
                  <div v-if="selectedRecord.achievements && selectedRecord.achievements.length > 0" class="achievements-list">
                    <a-tag v-for="achievement in selectedRecord.achievements" :key="achievement" color="green">
                      {{ achievement }}
                    </a-tag>
                  </div>
                  <div v-else class="no-data">暂无记录</div>
                </div>
              </div>
            </a-col>

            <a-col :span="12">
              <div class="detail-section">
                <h4><TeamOutlined /> 重要关系</h4>
                <div class="section-content">
                  <div v-if="selectedRecord.relationship && selectedRecord.relationship.length > 0" class="relationships-list">
                    <div v-for="relation in selectedRecord.relationship" :key="relation" class="relation-item">
                      {{ relation }}
                    </div>
                  </div>
                  <div v-else class="no-data">暂无记录</div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-modal>

    <!-- 关系网络弹窗 -->
    <a-modal v-model:open="relationshipModalVisible" title="关系网络详情" width="900px" :footer="null">
      <div v-if="selectedRecord" class="relationship-modal-content">
        <div class="modal-header">
          <div class="soul-info">
            <a-avatar :style="{ backgroundColor: getKarmaColor(selectedRecord.karma) }" size="large">
              {{ selectedRecord.name.charAt(0) }}
            </a-avatar>
            <div class="soul-details">
              <h3>{{ selectedRecord.name }}的关系网络</h3>
              <div class="soul-meta">{{ selectedRecord.soulId }} · 第{{ selectedRecord.cycle }}世 · 业力{{ selectedRecord.karma }}</div>
            </div>
          </div>
        </div>

        <a-divider />

        <div class="network-display">
          <div v-if="getRecordRelationships(selectedRecord.soulId)" class="relationship-tree">
            <div class="center-soul">
              <div class="center-card">
                <a-avatar :style="{ backgroundColor: getKarmaColor(selectedRecord.karma) }" size="large">
                  {{ selectedRecord.name.charAt(0) }}
                </a-avatar>
                <div class="center-name">{{ selectedRecord.name }}</div>
              </div>
            </div>

            <div class="connected-souls">
              <div v-for="relationship in getRecordRelationships(selectedRecord.soulId)" :key="relationship.id" class="relationship-node">
                <div class="connection-line"></div>
                <div class="node-card">
                  <a-avatar :style="{ backgroundColor: getKarmaColor(relationship.karma) }">
                    {{ relationship.name.charAt(0) }}
                  </a-avatar>
                  <div class="node-info">
                    <div class="node-name">{{ relationship.name }}</div>
                    <div class="node-relation">{{ relationship.relationType }}</div>
                    <div class="node-shared">{{ relationship.sharedCycles }}世交集</div>
                    <div class="node-karma">业力: {{ relationship.karma }}</div>
                    <div class="node-description">{{ relationship.description }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-relationships">
            <a-empty description="暂无关系网络数据" />
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 修行进度弹窗 -->
    <a-modal v-model:open="progressModalVisible" title="修行进度详情" width="800px" :footer="null">
      <div v-if="selectedRecord" class="progress-modal-content">
        <div class="modal-header">
          <div class="soul-info">
            <a-avatar :style="{ backgroundColor: getKarmaColor(selectedRecord.karma) }" size="large">
              {{ selectedRecord.name.charAt(0) }}
            </a-avatar>
            <div class="soul-details">
              <h3>{{ selectedRecord.name }}的修行进度</h3>
              <div class="soul-meta">{{ selectedRecord.soulId }} · 第{{ selectedRecord.cycle }}世</div>
            </div>
          </div>
          <div class="progress-score">
            <div class="score-value" :class="getProgressScoreClass(getRecordProgressScore(selectedRecord.soulId))">{{ getRecordProgressScore(selectedRecord.soulId) }}分</div>
            <div class="score-label">修行评分</div>
          </div>
        </div>

        <a-divider />

        <div v-if="getRecordProgress(selectedRecord.soulId)" class="progress-details">
          <div class="progress-overview">
            <a-row :gutter="[24, 16]">
              <a-col :span="6">
                <div class="overview-item">
                  <div class="item-value">{{ getRecordProgress(selectedRecord.soulId).totalCycles }}</div>
                  <div class="item-label">总轮回数</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="overview-item">
                  <div class="item-value">{{ getRecordProgress(selectedRecord.soulId).initialKarma }}</div>
                  <div class="item-label">起始业力</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="overview-item">
                  <div class="item-value highlight">{{ getRecordProgress(selectedRecord.soulId).peakKarma }}</div>
                  <div class="item-label">最高业力</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="overview-item">
                  <div class="item-value">{{ selectedRecord.karma }}</div>
                  <div class="item-label">当前业力</div>
                </div>
              </a-col>
            </a-row>
          </div>

          <div class="karma-trend-section">
            <h4><BarChartOutlined /> 业力变化趋势</h4>
            <div class="trend-chart">
              <div
                v-for="(point, index) in getRecordProgress(selectedRecord.soulId).karmaTrend"
                :key="index"
                class="trend-point"
                :style="{
                  height: (point / 100) * 60 + 'px',
                  backgroundColor: getKarmaColor(point)
                }"
                :title="`第${index + 1}世: ${point}`"
              ></div>
            </div>
          </div>

          <div class="milestones-section">
            <h4><CrownOutlined /> 重要里程碑</h4>
            <div class="milestones-timeline">
              <div v-for="milestone in getRecordProgress(selectedRecord.soulId).milestones" :key="milestone.cycle" class="milestone-item">
                <div class="milestone-cycle">第{{ milestone.cycle }}世</div>
                <div class="milestone-content">
                  <a-tag :color="milestone.type === 'achievement' ? 'success' : 'warning'">
                    {{ milestone.description }}
                  </a-tag>
                </div>
              </div>
            </div>
          </div>

          <div class="progress-stats">
            <a-row :gutter="[24, 16]">
              <a-col :span="12">
                <div class="stat-item">
                  <span class="stat-label">上升轮回数：</span>
                  <span class="stat-value success">{{ getRecordProgress(selectedRecord.soulId).ascendingCycles }}世</span>
                </div>
              </a-col>
              <a-col :span="12">
                <div class="stat-item">
                  <span class="stat-label">下降轮回数：</span>
                  <span class="stat-value warning">{{ getRecordProgress(selectedRecord.soulId).descendingCycles }}世</span>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
        <div v-else class="no-progress">
          <a-empty description="暂无修行进度数据" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { ExportOutlined, HistoryOutlined, UserOutlined, BarChartOutlined, TrophyOutlined, ArrowRightOutlined, ArrowLeftOutlined, FilterOutlined, HomeOutlined, EnvironmentOutlined, TeamOutlined, CrownOutlined } from '@ant-design/icons-vue'

// 路由
const router = useRouter()

// 响应式数据
const searchQuery = ref('')
const activeTab = ref('records')
const realmFilter = ref('')
const dateRange = ref([])
const karmaRangeFilter = ref('')
const selectedSoul = ref('')
const progressTimeRange = ref('all')
const progressSort = ref('progress')
const relationshipSearchQuery = ref('')
const relationshipTypeFilter = ref('')
const relationshipKarmaFilter = ref('')

// 统计数据
const totalRecords = ref(12876543)
const uniqueSouls = ref(3456789)
const averageCycles = ref(18.7)
const progressRate = ref(76.8)

// 历代转世记录数据
const reincarnationRecords = ref([
  {
    id: 1,
    soulId: 'S001',
    name: '张三',
    cycle: 8,
    fromRealm: '人道',
    toRealm: '天道',
    previousLife: '善良农夫',
    currentLife: '仙人',
    previousKarma: 78,
    karma: 95,
    karmaChange: 17,
    reason: '积善行德，救助众生',
    specialEvents: '舍身救人',
    reincarnationTime: '2023-12-15 14:30',
    lifespan: 72,
    location: '江南水乡',
    achievements: ['修桥补路', '济贫助困', '教化后人'],
    relationship: ['夫妻：李翠花(S089)', '子女：张小明(S234)', '师父：老和尚(S009)'],
    deathCause: '寿终正寝'
  },
  {
    id: 2,
    soulId: 'S002',
    name: '李四',
    cycle: 15,
    fromRealm: '地狱道',
    toRealm: '畜生道',
    previousLife: '恶霸地主',
    currentLife: '牛',
    previousKarma: 12,
    karma: 25,
    karmaChange: 13,
    reason: '地狱受苦已足，开始偿还业债',
    specialEvents: '地狱火海炼心',
    reincarnationTime: '2023-12-14 09:15',
    lifespan: 3,
    location: '四川农村',
    achievements: ['勤劳耕作', '承受苦难'],
    relationship: ['主人：老农夫(S156)', '同伴：黄牛(S267)'],
    deathCause: '过度劳累'
  },
  {
    id: 3,
    soulId: 'S003',
    name: '王五',
    cycle: 23,
    fromRealm: '阿修罗道',
    toRealm: '人道',
    previousLife: '战神将军',
    currentLife: '书生',
    previousKarma: 73,
    karma: 68,
    karmaChange: -5,
    reason: '嗔怒过重，需体验人间苦乐',
    specialEvents: '修罗战败，反思内省',
    reincarnationTime: '2023-12-13 16:42',
    lifespan: 45,
    location: '京城书院',
    achievements: ['诗词造诣', '教书育人', '著书立说'],
    relationship: ['妻子：红娘(S145)', '学生：小童(S298)', '挚友：文人墨客(S123)'],
    deathCause: '忧国忧民，积劳成疾'
  },
  {
    id: 4,
    soulId: 'S004',
    name: '赵六',
    cycle: 31,
    fromRealm: '畜生道',
    toRealm: '人道',
    previousLife: '灵猴',
    currentLife: '武僧',
    previousKarma: 45,
    karma: 82,
    karmaChange: 37,
    reason: '灵性觉醒，修行有成',
    specialEvents: '山中修行百年',
    reincarnationTime: '2023-12-12 08:20',
    lifespan: 89,
    location: '少林寺',
    achievements: ['降妖除魔', '佛法精深', '武艺超群', '度化众生'],
    relationship: ['师父：老方丈(S067)', '师弟：小沙弥(S189)', '俗家弟子：江湖豪杰(S234)'],
    deathCause: '坐化圆寂'
  },
  {
    id: 5,
    soulId: 'S005',
    name: '孙七',
    cycle: 7,
    fromRealm: '饿鬼道',
    toRealm: '畜生道',
    previousLife: '贪婪商人',
    currentLife: '家犬',
    previousKarma: 18,
    karma: 35,
    karmaChange: 17,
    reason: '贪欲减轻，开始忠诚服务',
    specialEvents: '主人慈悲，常得温饱',
    reincarnationTime: '2023-12-11 12:35',
    lifespan: 12,
    location: '富商家宅',
    achievements: ['忠心护主', '与人为善'],
    relationship: ['主人：善心富商(S178)', '同伴：花猫(S203)'],
    deathCause: '寿终正寝'
  },
  {
    id: 6,
    soulId: 'S006',
    name: '周八',
    cycle: 19,
    fromRealm: '人道',
    toRealm: '阿修罗道',
    previousLife: '守城将军',
    currentLife: '修罗战士',
    previousKarma: 71,
    karma: 79,
    karmaChange: 8,
    reason: '武德兼备，晋升修罗',
    specialEvents: '守城牺牲，英勇无畏',
    reincarnationTime: '2023-12-10 19:28',
    lifespan: 52,
    location: '边关要塞',
    achievements: ['保家卫国', '勇猛善战', '仁爱士兵'],
    relationship: ['妻子：将军夫人(S167)', '副将：忠勇副官(S198)', '士兵：众多部下'],
    deathCause: '战死沙场'
  },
  {
    id: 7,
    soulId: 'S007',
    name: '吴九',
    cycle: 42,
    fromRealm: '天道',
    toRealm: '人道',
    previousLife: '慈悲天神',
    currentLife: '医者',
    previousKarma: 98,
    karma: 91,
    karmaChange: -7,
    reason: '发愿入世度化众生',
    specialEvents: '天界功德圆满，主动下凡',
    reincarnationTime: '2023-12-09 14:18',
    lifespan: 78,
    location: '江南古镇',
    achievements: ['悬壶济世', '医术精湛', '分文不取', '救死扶伤'],
    relationship: ['弟子：传承医者(S145)', '病患：无数众生', '挚友：文人学者(S187)'],
    deathCause: '积劳成疾，功德圆满'
  },
  {
    id: 8,
    soulId: 'S008',
    name: '郑十',
    cycle: 5,
    fromRealm: '人道',
    toRealm: '饿鬼道',
    previousLife: '贪官污吏',
    currentLife: '饥饿鬼',
    previousKarma: 35,
    karma: 8,
    karmaChange: -27,
    reason: '贪污腐败，业力深重',
    specialEvents: '民愤极大，遭天谴',
    reincarnationTime: '2023-12-08 21:45',
    lifespan: 0,
    location: '饿鬼道',
    achievements: [],
    relationship: ['冤魂：受害百姓(众多)', '同类：其他饿鬼'],
    deathCause: '尚在饿鬼道受苦'
  },
  {
    id: 9,
    soulId: 'S009',
    name: '何十一',
    cycle: 28,
    fromRealm: '人道',
    toRealm: '天道',
    previousLife: '慈善长者',
    currentLife: '护法天神',
    previousKarma: 89,
    karma: 96,
    karmaChange: 7,
    reason: '慈悲济世，功德无量',
    specialEvents: '建立孤儿院，救助万人',
    reincarnationTime: '2023-12-07 07:30',
    lifespan: 95,
    location: '繁华都市',
    achievements: ['慈善事业', '孤儿教育', '医院建设', '文化传承'],
    relationship: ['夫人：贤内助(S134)', '养子：孤儿(众多)', '合作：慈善同仁'],
    deathCause: '无疾而终，功德圆满'
  },
  {
    id: 10,
    soulId: 'S010',
    name: '钱十二',
    cycle: 12,
    fromRealm: '畜生道',
    toRealm: '人道',
    previousLife: '老鹰',
    currentLife: '猎户',
    previousKarma: 42,
    karma: 58,
    karmaChange: 16,
    reason: '天性觉醒，渐具人性',
    specialEvents: '救助迷路旅人',
    reincarnationTime: '2023-12-06 15:12',
    lifespan: 67,
    location: '深山老林',
    achievements: ['山林守护', '救助迷人', '与自然和谐'],
    relationship: ['妻子：山村女子(S178)', '邻居：山民(S156)', '动物：山林众生'],
    deathCause: '山林意外'
  },
  {
    id: 11,
    soulId: 'S011',
    name: '陈十三',
    cycle: 36,
    fromRealm: '阿修罗道',
    toRealm: '人道',
    previousLife: '修罗王',
    currentLife: '武林盟主',
    previousKarma: 84,
    karma: 86,
    karmaChange: 2,
    reason: '武德并重，领导众人',
    specialEvents: '统一武林，维护正义',
    reincarnationTime: '2023-12-05 11:20',
    lifespan: 72,
    location: '武林圣地',
    achievements: ['武林统一', '除暴安良', '传承武学', '培养后进'],
    relationship: ['夫人：侠女(S167)', '弟子：各门派高手', '盟友：江湖豪杰'],
    deathCause: '武林大战，力竭而亡'
  },
  {
    id: 12,
    soulId: 'S012',
    name: '林十四',
    cycle: 8,
    fromRealm: '地狱道',
    toRealm: '人道',
    previousLife: '无恶不作',
    currentLife: '慈善义工',
    previousKarma: 3,
    karma: 76,
    karmaChange: 73,
    reason: '地狱觉悟，真心忏悔',
    specialEvents: '地狱千年炼心，彻底悔改',
    reincarnationTime: '2023-12-04 13:45',
    lifespan: 0,
    location: '现代都市',
    achievements: ['慈善义工', '助人为乐', '真心忏悔'],
    relationship: ['服务对象：需要帮助的人', '同伴：其他义工'],
    deathCause: '现世仍在'
  }
])

// 生灵列表
const soulsList = ref([
  { id: 'S001', name: '张三' },
  { id: 'S002', name: '李四' },
  { id: 'S003', name: '王五' },
  { id: 'S004', name: '赵六' },
  { id: 'S005', name: '孙七' },
  { id: 'S006', name: '周八' },
  { id: 'S007', name: '吴九' },
  { id: 'S008', name: '郑十' },
  { id: 'S009', name: '何十一' },
  { id: 'S010', name: '钱十二' },
  { id: 'S011', name: '陈十三' },
  { id: 'S012', name: '林十四' },
  { id: 'S013', name: '黄十五' },
  { id: 'S014', name: '刘十六' },
  { id: 'S015', name: '杨十七' },
  { id: 'S016', name: '朱十八' },
  { id: 'S017', name: '马十九' },
  { id: 'S018', name: '徐二十' },
  { id: 'S019', name: '唐二一' },
  { id: 'S020', name: '冯二二' }
])

// 全部关系网络数据
const allRelationships = ref([
  {
    soulId: 'S001',
    name: '张三',
    karma: 95,
    totalCycles: 8,
    relationships: [
      { id: 1, name: '李翠花', relationType: '夫妻关系', sharedCycles: 5, karma: 78, description: '相伴五世，情深意重，共同经历人间苦乐' },
      { id: 2, name: '张小明', relationType: '父子关系', sharedCycles: 3, karma: 65, description: '血脉传承，慈父严教，培养成才' },
      { id: 3, name: '老和尚', relationType: '师徒关系', sharedCycles: 2, karma: 92, description: '佛法启蒙，功德深厚，点化开悟' },
      { id: 4, name: '村长', relationType: '邻里关系', sharedCycles: 4, karma: 72, description: '邻里守望，互助友爱，共建家园' },
      { id: 5, name: '乞丐老人', relationType: '善缘关系', sharedCycles: 1, karma: 45, description: '施恩不图报，慈悲为怀，种下善因' },
      { id: 6, name: '病重孩童', relationType: '救命关系', sharedCycles: 2, karma: 32, description: '倾力相救，医药费用，不求回报' },
      { id: 7, name: '盗贼头子', relationType: '度化关系', sharedCycles: 1, karma: 28, description: '以德报怨，化敌为友，改邪归正' }
    ]
  },
  {
    soulId: 'S002',
    name: '李四',
    karma: 25,
    totalCycles: 15,
    relationships: [
      { id: 8, name: '老农夫', relationType: '主仆关系', sharedCycles: 2, karma: 68, description: '耕牛岁月，默默承受，主人慈悲' },
      { id: 9, name: '黄牛', relationType: '同伴关系', sharedCycles: 1, karma: 35, description: '畜生道中，相依为命，同甘共苦' },
      { id: 10, name: '受害农民', relationType: '冤债关系', sharedCycles: 6, karma: 12, description: '前世恶行，今生偿还，业报循环' },
      { id: 11, name: '地狱狱卒', relationType: '业力关系', sharedCycles: 8, karma: 25, description: '地狱炼心，业报循环，苦海无涯' },
      { id: 12, name: '恶霸同伙', relationType: '共业关系', sharedCycles: 4, karma: 15, description: '同流合污，共造恶业，一同受报' },
      { id: 13, name: '被欺压百姓', relationType: '冤债关系', sharedCycles: 7, karma: 8, description: '压榨百姓，民不聊生，怨声载道' }
    ]
  },
  {
    soulId: 'S003',
    name: '王五',
    karma: 68,
    totalCycles: 23,
    relationships: [
      { id: 14, name: '红娘', relationType: '夫妻关系', sharedCycles: 4, karma: 71, description: '红颜知己，诗书相伴，才子佳人' },
      { id: 15, name: '小童', relationType: '师生关系', sharedCycles: 2, karma: 58, description: '传道授业，文化传承，教书育人' },
      { id: 16, name: '文人墨客', relationType: '朋友关系', sharedCycles: 3, karma: 75, description: '文友诗朋，志同道合，互相切磋' },
      { id: 17, name: '修罗战友', relationType: '战友关系', sharedCycles: 7, karma: 79, description: '修罗道中，并肩作战，生死与共' },
      { id: 18, name: '战败敌人', relationType: '宿敌关系', sharedCycles: 5, karma: 45, description: '修罗征战，胜负轮回，恩怨纠缠' },
      { id: 19, name: '部下将士', relationType: '上下级关系', sharedCycles: 6, karma: 62, description: '统领三军，爱兵如子，共御外敌' },
      { id: 20, name: '贤内助', relationType: '夫妻关系', sharedCycles: 8, karma: 82, description: '前世修罗，今世书生，贤妻相伴' }
    ]
  },
  {
    soulId: 'S004',
    name: '赵六',
    karma: 82,
    totalCycles: 31,
    relationships: [
      { id: 22, name: '老方丈', relationType: '师父关系', sharedCycles: 3, karma: 95, description: '佛法传承，点化开悟，慈悲度化' },
      { id: 23, name: '小沙弥', relationType: '兄弟关系', sharedCycles: 2, karma: 67, description: '同门修行，互相扶持，共悟佛理' },
      { id: 24, name: '江湖豪杰', relationType: '师生关系', sharedCycles: 1, karma: 78, description: '武学传授，济世救人，行侠仗义' },
      { id: 25, name: '山中精怪', relationType: '降魔关系', sharedCycles: 4, karma: 32, description: '除魔卫道，功德无量，护佑众生' },
      { id: 26, name: '猴王', relationType: '前世关系', sharedCycles: 8, karma: 45, description: '灵猴岁月，山林称王，逐渐觉悟' },
      { id: 27, name: '受救村民', relationType: '救助关系', sharedCycles: 5, karma: 54, description: '除魔救民，功德无量，百姓感恩' },
      { id: 28, name: '修行道友', relationType: '朋友关系', sharedCycles: 12, karma: 87, description: '同修佛法，切磋武艺，道友情深' }
    ]
  },
  {
    soulId: 'S005',
    name: '孙七',
    karma: 35,
    totalCycles: 7,
    relationships: [
      { id: 29, name: '善心富商', relationType: '主仆关系', sharedCycles: 1, karma: 82, description: '忠犬护主，义无反顾，主人慈悲' },
      { id: 30, name: '花猫', relationType: '同伴关系', sharedCycles: 1, karma: 38, description: '宠物伙伴，相伴左右，温暖陪伴' },
      { id: 31, name: '被骗客户', relationType: '冤债关系', sharedCycles: 3, karma: 18, description: '商场欺诈，今生偿还，愧疚难安' },
      { id: 32, name: '饿鬼同伴', relationType: '共业关系', sharedCycles: 2, karma: 15, description: '饿鬼道中，同病相怜，共受苦难' },
      { id: 33, name: '贪婪伙伴', relationType: '共犯关系', sharedCycles: 4, karma: 12, description: '前世合伙，贪心作恶，共同堕落' }
    ]
  },
  {
    soulId: 'S006',
    name: '周八',
    karma: 79,
    totalCycles: 19,
    relationships: [
      { id: 34, name: '将军夫人', relationType: '夫妻关系', sharedCycles: 6, karma: 74, description: '军中佳人，内助贤妻，共度战火' },
      { id: 35, name: '忠勇副官', relationType: '战友关系', sharedCycles: 8, karma: 76, description: '生死战友，忠心耿耿，共守边关' },
      { id: 36, name: '敌军将领', relationType: '宿敌关系', sharedCycles: 5, karma: 71, description: '战场对手，惺惺相惜，英雄惜英雄' },
      { id: 37, name: '城内百姓', relationType: '保护关系', sharedCycles: 3, karma: 65, description: '守城护民，舍生忘死，百姓安康' },
      { id: 38, name: '年轻士兵', relationType: '师生关系', sharedCycles: 4, karma: 58, description: '传授兵法，爱兵如子，培养后辈' },
      { id: 39, name: '修罗大将', relationType: '前世关系', sharedCycles: 11, karma: 85, description: '修罗道中，威震三界，武勇双全' },
      { id: 40, name: '战马', relationType: '伙伴关系', sharedCycles: 7, karma: 42, description: '征战沙场，人马一体，生死相依' }
    ]
  },
  {
    soulId: 'S007',
    name: '吴九',
    karma: 91,
    totalCycles: 42,
    relationships: [
      { id: 41, name: '传承医者', relationType: '师生关系', sharedCycles: 5, karma: 85, description: '悬壶济世，医术传承，救死扶伤' },
      { id: 42, name: '重病患者', relationType: '医患关系', sharedCycles: 8, karma: 45, description: '妙手回春，分文不取，医者仁心' },
      { id: 43, name: '文人学者', relationType: '朋友关系', sharedCycles: 12, karma: 88, description: '博学多才，文医并重，学者风范' },
      { id: 44, name: '天界同僚', relationType: '同事关系', sharedCycles: 15, karma: 96, description: '天界功德，慈悲度世，神仙眷侣' },
      { id: 45, name: '贫苦村民', relationType: '救助关系', sharedCycles: 20, karma: 32, description: '济贫扶困，医者父母心，功德无量' },
      { id: 46, name: '医学传人', relationType: '师生关系', sharedCycles: 3, karma: 78, description: '医道传承，后继有人，薪火相传' },
      { id: 47, name: '天帝', relationType: '上下级关系', sharedCycles: 18, karma: 98, description: '天界册封，功德圆满，位列仙班' },
      { id: 48, name: '病魔', relationType: '降魔关系', sharedCycles: 25, karma: 8, description: '对抗病魔，医者使命，拯救苍生' }
    ]
  },
  {
    soulId: 'S008',
    name: '郑十',
    karma: 8,
    totalCycles: 5,
    relationships: [
      { id: 49, name: '受害百姓', relationType: '冤债关系', sharedCycles: 4, karma: 12, description: '贪污腐败，民不聊生，怨声载道' },
      { id: 50, name: '其他饿鬼', relationType: '同病关系', sharedCycles: 1, karma: 10, description: '饿鬼道中，同受苦难，互相怜悯' },
      { id: 51, name: '贪官同伙', relationType: '共犯关系', sharedCycles: 3, karma: 15, description: '官官相护，贪污受贿，一同堕落' },
      { id: 52, name: '清廉官员', relationType: '对立关系', sharedCycles: 2, karma: 89, description: '清浊分明，水火不容，正邪对立' },
      { id: 53, name: '行贿商人', relationType: '利益关系', sharedCycles: 4, karma: 22, description: '权钱交易，互相利用，同流合污' }
    ]
  },
  {
    soulId: 'S009',
    name: '何十一',
    karma: 96,
    totalCycles: 28,
    relationships: [
      { id: 54, name: '贤内助', relationType: '夫妻关系', sharedCycles: 12, karma: 89, description: '慈善夫妻，志同道合，共济天下' },
      { id: 55, name: '孤儿', relationType: '父子关系', sharedCycles: 8, karma: 67, description: '收养孤儿，慈父之爱，培养成才' },
      { id: 56, name: '慈善同仁', relationType: '合作关系', sharedCycles: 15, karma: 92, description: '慈善事业，携手并进，造福苍生' },
      { id: 57, name: '穷苦百姓', relationType: '救助关系', sharedCycles: 20, karma: 35, description: '救济贫困，雪中送炭，温暖人心' },
      { id: 58, name: '天神', relationType: '感化关系', sharedCycles: 5, karma: 98, description: '功德感天，证得天道，位列仙班' },
      { id: 59, name: '医院院长', relationType: '合作关系', sharedCycles: 6, karma: 84, description: '建设医院，救死扶伤，功德无量' },
      { id: 60, name: '学校校长', relationType: '合作关系', sharedCycles: 4, karma: 81, description: '兴办教育，启蒙民智，文化传承' }
    ]
  },
  {
    soulId: 'S010',
    name: '钱十二',
    karma: 58,
    totalCycles: 12,
    relationships: [
      { id: 61, name: '山村女子', relationType: '夫妻关系', sharedCycles: 3, karma: 62, description: '山野夫妻，朴实无华，相守一生' },
      { id: 62, name: '山民', relationType: '邻里关系', sharedCycles: 5, karma: 56, description: '山村邻里，互助友爱，和睦相处' },
      { id: 63, name: '山林众生', relationType: '守护关系', sharedCycles: 8, karma: 48, description: '保护山林，与自然和谐，生态平衡' },
      { id: 64, name: '迷路旅人', relationType: '救助关系', sharedCycles: 2, karma: 52, description: '救助迷人，路见不平，善心显现' },
      { id: 65, name: '老鹰族群', relationType: '前世关系', sharedCycles: 6, karma: 42, description: '前世鹰王，翱翔天际，逐渐觉悟' },
      { id: 66, name: '护林员', relationType: '合作关系', sharedCycles: 4, karma: 72, description: '共同护林，保护家园，环境卫士' }
    ]
  },
  {
    soulId: 'S011',
    name: '陈十三',
    karma: 86,
    totalCycles: 36,
    relationships: [
      { id: 67, name: '侠女', relationType: '夫妻关系', sharedCycles: 8, karma: 83, description: '武林侠侣，并肩江湖，除暴安良' },
      { id: 68, name: '各门派高手', relationType: '师生关系', sharedCycles: 12, karma: 79, description: '武林盟主，统领群雄，传承武学' },
      { id: 69, name: '江湖豪杰', relationType: '朋友关系', sharedCycles: 15, karma: 81, description: '江湖义气，豪杰相交，正义之师' },
      { id: 70, name: '邪派魔头', relationType: '宿敌关系', sharedCycles: 10, karma: 25, description: '正邪对立，武林大战，维护正道' },
      { id: 71, name: '修罗王', relationType: '前世关系', sharedCycles: 20, karma: 89, description: '修罗道王，威震三界，武德并重' },
      { id: 72, name: '武林晚辈', relationType: '师生关系', sharedCycles: 6, karma: 65, description: '培养后进，武学传承，江湖未来' },
      { id: 73, name: '武林同盟', relationType: '盟友关系', sharedCycles: 18, karma: 84, description: '结盟抗敌，共卫武林，正义联盟' }
    ]
  },
  {
    soulId: 'S012',
    name: '林十四',
    karma: 76,
    totalCycles: 8,
    relationships: [
      { id: 74, name: '服务对象', relationType: '服务关系', sharedCycles: 1, karma: 45, description: '义工服务，无私奉献，助人为乐' },
      { id: 75, name: '其他义工', relationType: '同事关系', sharedCycles: 1, karma: 68, description: '志愿服务，团队合作，爱心传递' },
      { id: 76, name: '受害者', relationType: '忏悔关系', sharedCycles: 6, karma: 5, description: '前世作恶，真心忏悔，请求原谅' },
      { id: 77, name: '地狱判官', relationType: '审判关系', sharedCycles: 2, karma: 85, description: '地狱受审，千年炼心，彻底悔改' },
      { id: 78, name: '善心人士', relationType: '感化关系', sharedCycles: 1, karma: 87, description: '被人感化，改邪归正，重新做人' }
    ]
  },
  {
    soulId: 'S013',
    name: '黄十五',
    karma: 73,
    totalCycles: 16,
    relationships: [
      { id: 79, name: '妻子', relationType: '夫妻关系', sharedCycles: 7, karma: 71, description: '贤妻良母，相夫教子，家庭和睦' },
      { id: 80, name: '儿子', relationType: '父子关系', sharedCycles: 4, karma: 62, description: '慈父严教，血脉传承，望子成龙' },
      { id: 81, name: '徒弟', relationType: '师徒关系', sharedCycles: 3, karma: 58, description: '手艺传承，师父领进门，修行靠个人' },
      { id: 82, name: '同行工匠', relationType: '同行关系', sharedCycles: 9, karma: 67, description: '同行相交，技艺切磋，互相提高' },
      { id: 83, name: '顾客', relationType: '服务关系', sharedCycles: 12, karma: 69, description: '诚信经营，童叟无欺，口碑相传' },
      { id: 84, name: '贫困邻居', relationType: '邻里关系', sharedCycles: 5, karma: 48, description: '邻里互助，雪中送炭，温暖人心' }
    ]
  },
  {
    soulId: 'S014',
    name: '刘十六',
    karma: 54,
    totalCycles: 20,
    relationships: [
      { id: 85, name: '母亲', relationType: '母子关系', sharedCycles: 8, karma: 78, description: '慈母深恩，养育之恩，血浓于水' },
      { id: 86, name: '师父', relationType: '师徒关系', sharedCycles: 5, karma: 82, description: '学艺深造，师恩如山，技艺精进' },
      { id: 87, name: '青梅竹马', relationType: '恋人关系', sharedCycles: 6, karma: 65, description: '青梅竹马，两小无猜，初恋情深' },
      { id: 88, name: '好友', relationType: '朋友关系', sharedCycles: 11, karma: 59, description: '知心好友，患难与共，友谊长存' },
      { id: 89, name: '债主', relationType: '债务关系', sharedCycles: 3, karma: 41, description: '欠债还钱，天经地义，信誉为本' },
      { id: 90, name: '竞争对手', relationType: '竞争关系', sharedCycles: 7, karma: 52, description: '商场竞争，各凭本事，良性竞争' },
      { id: 91, name: '员工', relationType: '雇佣关系', sharedCycles: 4, karma: 56, description: '雇主员工，互利共赢，和谐发展' }
    ]
  },
  {
    soulId: 'S015',
    name: '杨十七',
    karma: 89,
    totalCycles: 25,
    relationships: [
      { id: 92, name: '丈夫', relationType: '夫妻关系', sharedCycles: 12, karma: 86, description: '夫妻恩爱，举案齐眉，白头偕老' },
      { id: 93, name: '女儿', relationType: '母女关系', sharedCycles: 6, karma: 75, description: '母女情深，爱女如命，含辛茹苦' },
      { id: 94, name: '学生', relationType: '师生关系', sharedCycles: 15, karma: 68, description: '师者风范，桃李满天下，教书育人' },
      { id: 95, name: '同事', relationType: '同事关系', sharedCycles: 8, karma: 72, description: '同事和睦，互相帮助，团队合作' },
      { id: 96, name: '病患', relationType: '医患关系', sharedCycles: 10, karma: 43, description: '悬壶济世，医者仁心，救死扶伤' },
      { id: 97, name: '义诊对象', relationType: '救助关系', sharedCycles: 7, karma: 38, description: '义务行医，分文不取，功德无量' },
      { id: 98, name: '医学前辈', relationType: '师徒关系', sharedCycles: 4, karma: 94, description: '医道传承，师恩深重，医术精进' }
    ]
  },
  {
    soulId: 'S016',
    name: '朱十八',
    karma: 31,
    totalCycles: 9,
    relationships: [
      { id: 99, name: '酒友', relationType: '朋友关系', sharedCycles: 5, karma: 35, description: '酒肉朋友，花天酒地，醉生梦死' },
      { id: 100, name: '赌友', relationType: '损友关系', sharedCycles: 4, karma: 28, description: '赌场相识，互相拖累，越陷越深' },
      { id: 101, name: '妻子', relationType: '夫妻关系', sharedCycles: 3, karma: 58, description: '糟糠之妻，含辛茹苦，默默承受' },
      { id: 102, name: '债主', relationType: '债务关系', sharedCycles: 6, karma: 45, description: '欠债如山，走投无路，生活困顿' },
      { id: 103, name: '放贷者', relationType: '借贷关系', sharedCycles: 2, karma: 22, description: '高利贷款，利滚利，债务缠身' },
      { id: 104, name: '儿子', relationType: '父子关系', sharedCycles: 3, karma: 42, description: '不肖父亲，愧对儿子，家庭破裂' }
    ]
  },
  {
    soulId: 'S017',
    name: '马十九',
    karma: 77,
    totalCycles: 18,
    relationships: [
      { id: 105, name: '战友', relationType: '战友关系', sharedCycles: 9, karma: 74, description: '生死战友，患难与共，兄弟情深' },
      { id: 106, name: '恋人', relationType: '恋人关系', sharedCycles: 5, karma: 69, description: '战地恋情，生死相依，爱情坚贞' },
      { id: 107, name: '上级', relationType: '上下级关系', sharedCycles: 7, karma: 81, description: '忠诚部下，服从命令，军人本色' },
      { id: 108, name: '救助对象', relationType: '救助关系', sharedCycles: 12, karma: 51, description: '战场救人，英勇无畏，军人使命' },
      { id: 109, name: '敌军', relationType: '敌对关系', sharedCycles: 6, karma: 46, description: '战场敌手，各为其主，兵戎相见' },
      { id: 110, name: '母亲', relationType: '母子关系', sharedCycles: 8, karma: 83, description: '慈母深恩，思子情切，盼儿归来' },
      { id: 111, name: '烈士家属', relationType: '抚恤关系', sharedCycles: 3, karma: 65, description: '照顾烈属，军人本分，义不容辞' }
    ]
  },
  {
    soulId: 'S018',
    name: '徐二十',
    karma: 65,
    totalCycles: 13,
    relationships: [
      { id: 112, name: '师父', relationType: '师徒关系', sharedCycles: 4, karma: 88, description: '艺术启蒙，师恩如山，技艺传承' },
      { id: 113, name: '同门师兄', relationType: '师兄弟关系', sharedCycles: 6, karma: 63, description: '同门情谊，互相切磋，共同进步' },
      { id: 114, name: '观众', relationType: '表演关系', sharedCycles: 8, karma: 58, description: '艺术表演，娱乐大众，传播文化' },
      { id: 115, name: '艺术赞助人', relationType: '资助关系', sharedCycles: 3, karma: 76, description: '慧眼识才，资助艺术，文化传承' },
      { id: 116, name: '爱慕者', relationType: '倾慕关系', sharedCycles: 2, karma: 61, description: '艺术魅力，才子佳人，情愫暗生' },
      { id: 117, name: '竞争对手', relationType: '竞争关系', sharedCycles: 5, karma: 59, description: '同行竞争，各展才华，良性竞争' },
      { id: 118, name: '学徒', relationType: '师生关系', sharedCycles: 4, karma: 52, description: '技艺传承，薪火相传，后继有人' }
    ]
  },
  {
    soulId: 'S019',
    name: '唐二一',
    karma: 43,
    totalCycles: 11,
    relationships: [
      { id: 119, name: '合伙人', relationType: '合作关系', sharedCycles: 6, karma: 41, description: '生意合伙，利益至上，勾心斗角' },
      { id: 120, name: '客户', relationType: '商业关系', sharedCycles: 8, karma: 39, description: '商业往来，唯利是图，信誉不佳' },
      { id: 121, name: '竞争对手', relationType: '竞争关系', sharedCycles: 5, karma: 44, description: '恶性竞争，不择手段，商场如战场' },
      { id: 122, name: '员工', relationType: '雇佣关系', sharedCycles: 4, karma: 36, description: '克扣工资，剥削员工，为富不仁' },
      { id: 123, name: '债权人', relationType: '债务关系', sharedCycles: 3, karma: 48, description: '资金周转，债台高筑，焦头烂额' },
      { id: 124, name: '受骗者', relationType: '欺骗关系', sharedCycles: 7, karma: 25, description: '商业欺诈，坑害客户，良心泯灭' },
      { id: 125, name: '家人', relationType: '家庭关系', sharedCycles: 9, karma: 52, description: '家庭关系，为钱争吵，亲情淡薄' }
    ]
  },
  {
    soulId: 'S020',
    name: '冯二二',
    karma: 92,
    totalCycles: 33,
    relationships: [
      { id: 126, name: '修行同伴', relationType: '朋友关系', sharedCycles: 15, karma: 89, description: '共同修行，道友情深，相互扶持' },
      { id: 127, name: '度化对象', relationType: '度化关系', sharedCycles: 20, karma: 34, description: '慈悲度化，救苦救难，功德无量' },
      { id: 128, name: '天界师父', relationType: '师徒关系', sharedCycles: 8, karma: 97, description: '天界修行，师父指导，道法精深' },
      { id: 129, name: '护法神兽', relationType: '护法关系', sharedCycles: 12, karma: 85, description: '神兽护法，忠心守护，灵性相通' },
      { id: 130, name: '信徒', relationType: '信仰关系', sharedCycles: 25, karma: 67, description: '普度众生，信众虔诚，法缘深厚' },
      { id: 131, name: '妖魔', relationType: '降魔关系', sharedCycles: 18, karma: 15, description: '降妖除魔，正邪对立，护佑苍生' },
      { id: 132, name: '同修道友', relationType: '道友关系', sharedCycles: 22, karma: 91, description: '同修正道，切磋法术，道行精进' },
      { id: 133, name: '转世弟子', relationType: '师生关系', sharedCycles: 6, karma: 73, description: '转世度化，师恩如海，法脉传承' }
    ]
  }
])

// 轮回次数分布
const cycleDistribution = ref([
  { range: '1-5', count: 1567890, percentage: 43.8, color: '#52c41a' },
  { range: '6-10', count: 1087654, percentage: 30.4, color: '#1890ff' },
  { range: '11-20', count: 456789, percentage: 12.8, color: '#fa8c16' },
  { range: '21-50', count: 345612, percentage: 9.7, color: '#eb2f96' },
  { range: '51-100', count: 98765, percentage: 2.8, color: '#722ed1' },
  { range: '100+', count: 23456, percentage: 0.7, color: '#8b5cf6' }
])

// 道别转换趋势
const realmTransitions = ref([
  { from: '人道', to: '天道', count: 12456, rate: 15.3 },
  { from: '畜生道', to: '人道', count: 45678, rate: 68.9 },
  { from: '地狱道', to: '饿鬼道', count: 8901, rate: 12.4 },
  { from: '饿鬼道', to: '畜生道', count: 23456, rate: 34.7 },
  { from: '阿修罗道', to: '人道', count: 18765, rate: 24.8 },
  { from: '人道', to: '阿修罗道', count: 9876, rate: 12.1 },
  { from: '天道', to: '人道', count: 5432, rate: 8.9 },
  { from: '人道', to: '畜生道', count: 32187, rate: 39.4 },
  { from: '人道', to: '饿鬼道', count: 15698, rate: 19.2 },
  { from: '人道', to: '地狱道', count: 7854, rate: 9.6 },
  { from: '畜生道', to: '饿鬼道', count: 12345, rate: 18.6 },
  { from: '饿鬼道', to: '地狱道', count: 6789, rate: 10.2 },
  { from: '地狱道', to: '畜生道', count: 21098, rate: 29.4 },
  { from: '畜生道', to: '阿修罗道', count: 3456, rate: 5.2 },
  { from: '阿修罗道', to: '天道', count: 2345, rate: 3.1 }
])

// 修行进度数据
const progressList = ref([
  {
    soulId: 'S001',
    name: '张三',
    totalCycles: 8,
    currentKarma: 95,
    initialKarma: 45,
    peakKarma: 95,
    ascendingCycles: 6,
    descendingCycles: 2,
    progressScore: 92,
    karmaTrend: [45, 52, 48, 61, 73, 69, 78, 95],
    milestones: [
      { cycle: 3, type: 'setback', description: '因贪欲业力下降' },
      { cycle: 5, type: 'achievement', description: '开始修行' },
      { cycle: 8, type: 'achievement', description: '证得天道' }
    ]
  },
  {
    soulId: 'S002',
    name: '李四',
    totalCycles: 15,
    currentKarma: 25,
    initialKarma: 8,
    peakKarma: 42,
    ascendingCycles: 8,
    descendingCycles: 7,
    progressScore: 38,
    karmaTrend: [8, 5, 3, 12, 18, 25, 32, 28, 35, 42, 38, 25, 18, 22, 25],
    milestones: [
      { cycle: 1, type: 'setback', description: '初入地狱，业力极低' },
      { cycle: 4, type: 'achievement', description: '开始忏悔，业力回升' },
      { cycle: 9, type: 'achievement', description: '地狱修行有成' },
      { cycle: 12, type: 'setback', description: '恶习复犯，再次堕落' },
      { cycle: 15, type: 'achievement', description: '转入畜生道，开始偿债' }
    ]
  },
  {
    soulId: 'S003',
    name: '王五',
    totalCycles: 23,
    currentKarma: 68,
    initialKarma: 85,
    peakKarma: 89,
    ascendingCycles: 12,
    descendingCycles: 11,
    progressScore: 71,
    karmaTrend: [85, 88, 89, 87, 85, 82, 78, 75, 72, 76, 79, 82, 85, 89, 86, 81, 76, 73, 75, 78, 73, 69, 68],
    milestones: [
      { cycle: 3, type: 'achievement', description: '修罗道巅峰，威震三界' },
      { cycle: 8, type: 'setback', description: '嗔怒过重，业力下滑' },
      { cycle: 14, type: 'achievement', description: '武德并重，重回巅峰' },
      { cycle: 18, type: 'setback', description: '战败反思，开始内省' },
      { cycle: 23, type: 'achievement', description: '转入人道，体验苦乐' }
    ]
  },
  {
    soulId: 'S004',
    name: '赵六',
    totalCycles: 31,
    currentKarma: 82,
    initialKarma: 15,
    peakKarma: 82,
    ascendingCycles: 25,
    descendingCycles: 6,
    progressScore: 88,
    karmaTrend: [15, 12, 18, 25, 32, 28, 35, 42, 45, 52, 58, 55, 62, 68, 72, 78, 75, 79, 82, 78, 75, 72, 76, 79, 82, 79, 76, 78, 80, 82, 82],
    milestones: [
      { cycle: 2, type: 'setback', description: '灵猴顽劣，业力低迷' },
      { cycle: 9, type: 'achievement', description: '山中觉悟，开始修行' },
      { cycle: 18, type: 'achievement', description: '百年苦修，佛性显现' },
      { cycle: 25, type: 'achievement', description: '转入人道，成为武僧' },
      { cycle: 31, type: 'achievement', description: '降魔护法，功德圆满' }
    ]
  },
  {
    soulId: 'S005',
    name: '孙七',
    totalCycles: 7,
    currentKarma: 35,
    initialKarma: 5,
    peakKarma: 35,
    ascendingCycles: 5,
    descendingCycles: 2,
    progressScore: 55,
    karmaTrend: [5, 8, 12, 15, 18, 22, 35],
    milestones: [
      { cycle: 1, type: 'setback', description: '商场贪婪，堕入饿鬼道' },
      { cycle: 4, type: 'achievement', description: '开始反省，业力缓升' },
      { cycle: 7, type: 'achievement', description: '转入畜生道，忠诚服务' }
    ]
  },
  {
    soulId: 'S006',
    name: '周八',
    totalCycles: 19,
    currentKarma: 79,
    initialKarma: 62,
    peakKarma: 85,
    ascendingCycles: 13,
    descendingCycles: 6,
    progressScore: 82,
    karmaTrend: [62, 65, 68, 72, 75, 78, 82, 85, 82, 79, 76, 78, 81, 84, 85, 82, 79, 81, 79],
    milestones: [
      { cycle: 5, type: 'achievement', description: '武德兼备，威名远扬' },
      { cycle: 8, type: 'achievement', description: '守城有功，业力巅峰' },
      { cycle: 11, type: 'setback', description: '战争残酷，内心挣扎' },
      { cycle: 15, type: 'achievement', description: '重拾信念，保家卫国' },
      { cycle: 19, type: 'achievement', description: '战死沙场，晋升修罗道' }
    ]
  },
  {
    soulId: 'S007',
    name: '吴九',
    totalCycles: 42,
    currentKarma: 91,
    initialKarma: 78,
    peakKarma: 98,
    ascendingCycles: 28,
    descendingCycles: 14,
    progressScore: 95,
    karmaTrend: [78, 82, 85, 88, 92, 95, 98, 96, 94, 92, 89, 91, 94, 97, 98, 95, 92, 89, 86, 88, 91, 94, 96, 98, 95, 91, 88, 85, 87, 90, 93, 96, 98, 95, 92, 89, 91, 94, 96, 93, 91, 91],
    milestones: [
      { cycle: 7, type: 'achievement', description: '天界功德圆满，位列仙班' },
      { cycle: 15, type: 'achievement', description: '慈悲度世，功德无量' },
      { cycle: 24, type: 'achievement', description: '再入天界，证果成真' },
      { cycle: 33, type: 'achievement', description: '三入天界，威德并重' },
      { cycle: 42, type: 'achievement', description: '发愿下凡，度化众生' }
    ]
  },
  {
    soulId: 'S008',
    name: '郑十',
    totalCycles: 5,
    currentKarma: 8,
    initialKarma: 45,
    peakKarma: 45,
    ascendingCycles: 0,
    descendingCycles: 5,
    progressScore: 15,
    karmaTrend: [45, 35, 25, 15, 8],
    milestones: [
      { cycle: 2, type: 'setback', description: '开始贪污，业力下滑' },
      { cycle: 4, type: 'setback', description: '腐败加剧，民怨沸腾' },
      { cycle: 5, type: 'setback', description: '恶行暴露，堕入饿鬼道' }
    ]
  },
  {
    soulId: 'S009',
    name: '何十一',
    totalCycles: 28,
    currentKarma: 96,
    initialKarma: 58,
    peakKarma: 96,
    ascendingCycles: 23,
    descendingCycles: 5,
    progressScore: 93,
    karmaTrend: [58, 62, 66, 70, 73, 76, 79, 82, 85, 88, 89, 87, 85, 88, 91, 94, 96, 94, 91, 89, 92, 95, 96, 94, 91, 93, 95, 96],
    milestones: [
      { cycle: 8, type: 'achievement', description: '开始慈善事业' },
      { cycle: 16, type: 'achievement', description: '建立孤儿院，救助万人' },
      { cycle: 23, type: 'achievement', description: '慈善功德，威名远扬' },
      { cycle: 28, type: 'achievement', description: '功德圆满，证得天道' }
    ]
  },
  {
    soulId: 'S010',
    name: '钱十二',
    totalCycles: 12,
    currentKarma: 58,
    initialKarma: 25,
    peakKarma: 65,
    ascendingCycles: 8,
    descendingCycles: 4,
    progressScore: 68,
    karmaTrend: [25, 28, 32, 38, 42, 45, 52, 58, 65, 62, 58, 58],
    milestones: [
      { cycle: 4, type: 'achievement', description: '天性觉醒，灵性初显' },
      { cycle: 8, type: 'achievement', description: '救助迷人，善心显现' },
      { cycle: 9, type: 'achievement', description: '巅峰业力，品性高洁' },
      { cycle: 12, type: 'achievement', description: '转入人道，成为猎户' }
    ]
  },
  {
    soulId: 'S011',
    name: '陈十三',
    totalCycles: 36,
    currentKarma: 86,
    initialKarma: 72,
    peakKarma: 89,
    ascendingCycles: 25,
    descendingCycles: 11,
    progressScore: 85,
    karmaTrend: [72, 75, 78, 82, 85, 88, 89, 86, 83, 80, 78, 81, 84, 87, 89, 86, 83, 81, 84, 86, 88, 89, 87, 84, 82, 85, 87, 89, 86, 83, 81, 84, 86, 88, 86, 86],
    milestones: [
      { cycle: 7, type: 'achievement', description: '修罗道巅峰，成为修罗王' },
      { cycle: 15, type: 'achievement', description: '武德并重，再创辉煌' },
      { cycle: 22, type: 'achievement', description: '第三次达到巅峰' },
      { cycle: 28, type: 'achievement', description: '第四次证道成功' },
      { cycle: 36, type: 'achievement', description: '转入人道，武林盟主' }
    ]
  },
  {
    soulId: 'S012',
    name: '林十四',
    totalCycles: 8,
    currentKarma: 76,
    initialKarma: 3,
    peakKarma: 76,
    ascendingCycles: 8,
    descendingCycles: 0,
    progressScore: 95,
    karmaTrend: [3, 8, 15, 25, 38, 52, 66, 76],
    milestones: [
      { cycle: 1, type: 'setback', description: '无恶不作，业力极低' },
      { cycle: 3, type: 'achievement', description: '地狱千年炼心，开始觉悟' },
      { cycle: 5, type: 'achievement', description: '真心忏悔，业力大增' },
      { cycle: 8, type: 'achievement', description: '转入人道，成为义工' }
    ]
  }
])

// 计算属性
const filteredRecords = computed(() => {
  let filtered = reincarnationRecords.value

  if (searchQuery.value) {
    filtered = filtered.filter((record) => record.name.includes(searchQuery.value) || record.soulId.includes(searchQuery.value))
  }

  if (realmFilter.value) {
    filtered = filtered.filter((record) => record.toRealm === realmFilter.value || record.fromRealm === realmFilter.value)
  }

  if (karmaRangeFilter.value) {
    const [min, max] = karmaRangeFilter.value.split('-').map(Number)
    filtered = filtered.filter((record) => record.karma >= min && record.karma <= max)
  }

  return filtered
})

const sortedProgressList = computed(() => {
  const sorted = [...progressList.value]

  switch (progressSort.value) {
    case 'progress':
      return sorted.sort((a, b) => b.progressScore - a.progressScore)
    case 'karma':
      return sorted.sort((a, b) => b.currentKarma - a.currentKarma)
    case 'cycles':
      return sorted.sort((a, b) => b.totalCycles - a.totalCycles)
    default:
      return sorted
  }
})

// 筛选后的关系网络数据
const filteredAllRelationships = computed(() => {
  let filtered = allRelationships.value

  // 文本搜索
  if (relationshipSearchQuery.value) {
    const query = relationshipSearchQuery.value.toLowerCase()
    filtered = filtered.filter((soulGroup) => {
      // 搜索生灵姓名
      if (soulGroup.name.toLowerCase().includes(query)) return true

      // 搜索关系中的人名或关系类型
      return soulGroup.relationships.some((rel) => rel.name.toLowerCase().includes(query) || rel.relationType.toLowerCase().includes(query) || rel.description.toLowerCase().includes(query))
    })
  }

  // 关系类型筛选
  if (relationshipTypeFilter.value) {
    filtered = filtered
      .map((soulGroup) => ({
        ...soulGroup,
        relationships: soulGroup.relationships.filter((rel) => rel.relationType === relationshipTypeFilter.value)
      }))
      .filter((soulGroup) => soulGroup.relationships.length > 0)
  }

  // 业力筛选
  if (relationshipKarmaFilter.value) {
    const [min, max] = relationshipKarmaFilter.value.split('-').map(Number)
    filtered = filtered
      .map((soulGroup) => ({
        ...soulGroup,
        relationships: soulGroup.relationships.filter((rel) => rel.karma >= min && rel.karma <= max)
      }))
      .filter((soulGroup) => soulGroup.relationships.length > 0)
  }

  return filtered
})

// 搜索关系网络
const searchRelationships = () => {
  if (relationshipSearchQuery.value) {
    message.info(`搜索关键词: ${relationshipSearchQuery.value}`)
  }
}

// 方法
const handleSearch = () => {
  message.info(`搜索: ${searchQuery.value}`)
}

const exportHistory = () => {
  message.success('历史记录导出成功')
}

// 弹窗控制
const detailModalVisible = ref(false)
const relationshipModalVisible = ref(false)
const progressModalVisible = ref(false)
const selectedRecord = ref(null)

const viewDetailHistory = (record) => {
  selectedRecord.value = record
  detailModalVisible.value = true
}

const viewRelationships = (record) => {
  selectedRecord.value = record
  relationshipModalVisible.value = true
}

const viewProgress = (record) => {
  selectedRecord.value = record
  progressModalVisible.value = true
}

const generateNetwork = () => {
  if (!selectedSoul.value) {
    message.warning('请先选择生灵')
    return
  }

  // 根据选择的生灵生成不同的关系网络
  const relationshipData = {
    S001: [
      // 张三
      { id: 1, name: '李翠花', relationType: '夫妻关系', sharedCycles: 5, karma: 78, description: '相伴五世，情深意重' },
      { id: 2, name: '张小明', relationType: '父子关系', sharedCycles: 3, karma: 65, description: '血脉传承，慈父严教' },
      { id: 3, name: '老和尚', relationType: '师徒关系', sharedCycles: 2, karma: 92, description: '佛法启蒙，功德深厚' },
      { id: 4, name: '村长', relationType: '邻里关系', sharedCycles: 4, karma: 72, description: '邻里守望，互助友爱' },
      { id: 5, name: '乞丐老人', relationType: '善缘关系', sharedCycles: 1, karma: 45, description: '施恩不图报，慈悲为怀' }
    ],
    S002: [
      // 李四
      { id: 6, name: '老农夫', relationType: '主仆关系', sharedCycles: 2, karma: 68, description: '耕牛岁月，默默承受' },
      { id: 7, name: '黄牛', relationType: '同伴关系', sharedCycles: 1, karma: 35, description: '畜生道中，相依为命' },
      { id: 8, name: '受害农民', relationType: '冤债关系', sharedCycles: 6, karma: 12, description: '前世恶行，今生偿还' },
      { id: 9, name: '地狱狱卒', relationType: '业力关系', sharedCycles: 8, karma: 25, description: '地狱炼心，业报循环' }
    ],
    S003: [
      // 王五
      { id: 10, name: '红娘', relationType: '夫妻关系', sharedCycles: 4, karma: 71, description: '红颜知己，诗书相伴' },
      { id: 11, name: '小童', relationType: '师生关系', sharedCycles: 2, karma: 58, description: '传道授业，文化传承' },
      { id: 12, name: '文人墨客', relationType: '知己关系', sharedCycles: 3, karma: 75, description: '文友诗朋，志同道合' },
      { id: 13, name: '修罗战友', relationType: '战友关系', sharedCycles: 7, karma: 79, description: '修罗道中，并肩作战' },
      { id: 14, name: '战败敌人', relationType: '宿敌关系', sharedCycles: 5, karma: 45, description: '修罗征战，胜负轮回' }
    ],
    S004: [
      // 赵六
      { id: 15, name: '老方丈', relationType: '师父关系', sharedCycles: 3, karma: 95, description: '佛法传承，点化开悟' },
      { id: 16, name: '小沙弥', relationType: '师兄弟关系', sharedCycles: 2, karma: 67, description: '同门修行，互相扶持' },
      { id: 17, name: '江湖豪杰', relationType: '俗家弟子关系', sharedCycles: 1, karma: 78, description: '武学传授，济世救人' },
      { id: 18, name: '山中精怪', relationType: '降魔关系', sharedCycles: 4, karma: 32, description: '除魔卫道，功德无量' },
      { id: 19, name: '猴王', relationType: '前世关系', sharedCycles: 8, karma: 45, description: '灵猴岁月，山林称王' }
    ],
    S005: [
      // 孙七
      { id: 20, name: '善心富商', relationType: '主仆关系', sharedCycles: 1, karma: 82, description: '忠犬护主，义无反顾' },
      { id: 21, name: '花猫', relationType: '同伴关系', sharedCycles: 1, karma: 38, description: '宠物伙伴，相伴左右' },
      { id: 22, name: '被骗客户', relationType: '前世冤债关系', sharedCycles: 3, karma: 18, description: '商场欺诈，今生偿还' },
      { id: 23, name: '饿鬼同伴', relationType: '苦难共享关系', sharedCycles: 2, karma: 15, description: '饿鬼道中，同病相怜' }
    ]
  }

  relationships.value = relationshipData[selectedSoul.value] || []

  if (relationships.value.length > 0) {
    message.success(`生成了${relationships.value.length}个关系节点`)
  } else {
    relationships.value = [{ id: 99, name: '暂无记录', relationType: '未知关系', sharedCycles: 0, karma: 50, description: '关系数据正在完善中' }]
    message.info('该生灵的关系网络正在整理中')
  }
}

const getKarmaColor = (karma) => {
  if (karma >= 90) return '#d4990a'
  if (karma >= 80) return '#52c41a'
  if (karma >= 60) return '#1890ff'
  if (karma >= 40) return '#fa8c16'
  return '#f5222d'
}

const getRealmColor = (realm) => {
  const colors = {
    天道: '#f59e0b',
    人道: '#10b981',
    阿修罗道: '#8b5cf6',
    畜生道: '#f97316',
    饿鬼道: '#06b6d4',
    地狱道: '#ef4444'
  }
  return colors[realm] || '#666'
}

const getRealmIcon = (realm) => {
  const icons = {
    天道: '☆',
    人道: '♂',
    阿修罗道: '⚔',
    畜生道: '🐾',
    饿鬼道: '👻',
    地狱道: '🔥'
  }
  return icons[realm] || '●'
}

// 返回主页方法
const goBack = () => {
  router.push('/reincarnation')
}

const getKarmaChangeClass = (change) => {
  if (change > 0) return 'positive'
  if (change < 0) return 'negative'
  return 'neutral'
}

const getProgressScoreClass = (score) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 60) return 'average'
  return 'poor'
}

// 获取指定生灵的关系网络数据
const getRecordRelationships = (soulId) => {
  const relationshipData = {
    S001: [
      { id: 1, name: '李翠花', relationType: '夫妻关系', sharedCycles: 5, karma: 78, description: '相伴五世，情深意重' },
      { id: 2, name: '张小明', relationType: '父子关系', sharedCycles: 3, karma: 65, description: '血脉传承，慈父严教' },
      { id: 3, name: '老和尚', relationType: '师徒关系', sharedCycles: 2, karma: 92, description: '佛法启蒙，功德深厚' },
      { id: 4, name: '村长', relationType: '邻里关系', sharedCycles: 4, karma: 72, description: '邻里守望，互助友爱' },
      { id: 5, name: '乞丐老人', relationType: '善缘关系', sharedCycles: 1, karma: 45, description: '施恩不图报，慈悲为怀' }
    ],
    S002: [
      { id: 6, name: '老农夫', relationType: '主仆关系', sharedCycles: 2, karma: 68, description: '耕牛岁月，默默承受' },
      { id: 7, name: '黄牛', relationType: '同伴关系', sharedCycles: 1, karma: 35, description: '畜生道中，相依为命' },
      { id: 8, name: '受害农民', relationType: '冤债关系', sharedCycles: 6, karma: 12, description: '前世恶行，今生偿还' },
      { id: 9, name: '地狱狱卒', relationType: '业力关系', sharedCycles: 8, karma: 25, description: '地狱炼心，业报循环' }
    ],
    S003: [
      { id: 10, name: '红娘', relationType: '夫妻关系', sharedCycles: 4, karma: 71, description: '红颜知己，诗书相伴' },
      { id: 11, name: '小童', relationType: '师生关系', sharedCycles: 2, karma: 58, description: '传道授业，文化传承' },
      { id: 12, name: '文人墨客', relationType: '知己关系', sharedCycles: 3, karma: 75, description: '文友诗朋，志同道合' },
      { id: 13, name: '修罗战友', relationType: '战友关系', sharedCycles: 7, karma: 79, description: '修罗道中，并肩作战' },
      { id: 14, name: '战败敌人', relationType: '宿敌关系', sharedCycles: 5, karma: 45, description: '修罗征战，胜负轮回' }
    ],
    S004: [
      { id: 15, name: '老方丈', relationType: '师父关系', sharedCycles: 3, karma: 95, description: '佛法传承，点化开悟' },
      { id: 16, name: '小沙弥', relationType: '师兄弟关系', sharedCycles: 2, karma: 67, description: '同门修行，互相扶持' },
      { id: 17, name: '江湖豪杰', relationType: '俗家弟子关系', sharedCycles: 1, karma: 78, description: '武学传授，济世救人' },
      { id: 18, name: '山中精怪', relationType: '降魔关系', sharedCycles: 4, karma: 32, description: '除魔卫道，功德无量' },
      { id: 19, name: '猴王', relationType: '前世关系', sharedCycles: 8, karma: 45, description: '灵猴岁月，山林称王' }
    ],
    S005: [
      { id: 20, name: '善心富商', relationType: '主仆关系', sharedCycles: 1, karma: 82, description: '忠犬护主，义无反顾' },
      { id: 21, name: '花猫', relationType: '同伴关系', sharedCycles: 1, karma: 38, description: '宠物伙伴，相伴左右' },
      { id: 22, name: '被骗客户', relationType: '前世冤债关系', sharedCycles: 3, karma: 18, description: '商场欺诈，今生偿还' },
      { id: 23, name: '饿鬼同伴', relationType: '苦难共享关系', sharedCycles: 2, karma: 15, description: '饿鬼道中，同病相怜' }
    ],
    S006: [
      { id: 24, name: '将军夫人', relationType: '夫妻关系', sharedCycles: 3, karma: 67, description: '贤内助，共患难' },
      { id: 25, name: '忠勇副官', relationType: '袍泽关系', sharedCycles: 4, karma: 79, description: '并肩作战，生死与共' },
      { id: 26, name: '众多部下', relationType: '长官关系', sharedCycles: 2, karma: 73, description: '爱兵如子，威信极高' },
      { id: 27, name: '敌国将领', relationType: '宿敌关系', sharedCycles: 6, karma: 52, description: '战场对手，惺惺相惜' }
    ],
    S007: [
      { id: 28, name: '传承医者', relationType: '师徒关系', sharedCycles: 2, karma: 89, description: '医道传承，救死扶伤' },
      { id: 29, name: '无数病患', relationType: '医患关系', sharedCycles: 1, karma: 65, description: '悬壶济世，医者仁心' },
      { id: 30, name: '文人学者', relationType: '挚友关系', sharedCycles: 3, karma: 87, description: '同道中人，相互切磋' },
      { id: 31, name: '贫苦百姓', relationType: '济助关系', sharedCycles: 1, karma: 45, description: '分文不取，普度众生' }
    ],
    S008: [
      { id: 32, name: '受害百姓', relationType: '冤债关系', sharedCycles: 5, karma: 8, description: '贪污受害，民怨沸腾' },
      { id: 33, name: '其他饿鬼', relationType: '同类关系', sharedCycles: 2, karma: 12, description: '同在饿鬼道，共同受苦' },
      { id: 34, name: '阎罗判官', relationType: '审判关系', sharedCycles: 1, karma: 95, description: '业力审判，罪有应得' }
    ],
    S009: [
      { id: 35, name: '贤内助', relationType: '夫妻关系', sharedCycles: 4, karma: 89, description: '同心协力，慈善事业' },
      { id: 36, name: '众多孤儿', relationType: '抚养关系', sharedCycles: 1, karma: 55, description: '如父如母，恩重如山' },
      { id: 37, name: '慈善同仁', relationType: '合作关系', sharedCycles: 2, karma: 85, description: '志同道合，造福社会' },
      { id: 38, name: '受助病人', relationType: '救助关系', sharedCycles: 1, karma: 48, description: '医院建设，救死扶伤' }
    ],
    S010: [
      { id: 39, name: '山村女子', relationType: '夫妻关系', sharedCycles: 2, karma: 65, description: '山林眷侣，相依为命' },
      { id: 40, name: '山民邻居', relationType: '邻里关系', sharedCycles: 3, karma: 58, description: '山中守望，互助友爱' },
      { id: 41, name: '山林众生', relationType: '守护关系', sharedCycles: 4, karma: 42, description: '山林之王，保护动物' },
      { id: 42, name: '迷路旅人', relationType: '救助关系', sharedCycles: 1, karma: 63, description: '山中救助，功德无量' }
    ]
  }
  return relationshipData[soulId] || []
}

// 获取指定生灵的修行进度数据
const getRecordProgress = (soulId) => {
  const progressData = {
    S001: {
      soulId: 'S001',
      name: '张三',
      totalCycles: 18,
      currentKarma: 95,
      initialKarma: 45,
      peakKarma: 95,
      ascendingCycles: 14,
      descendingCycles: 4,
      progressScore: 92,
      karmaTrend: [45, 52, 48, 61, 58, 66, 73, 69, 78, 82, 75, 81, 88, 85, 90, 87, 92, 95],
      milestones: [
        { cycle: 7, type: 'achievement', description: '首次行善积德' },
        { cycle: 10, type: 'achievement', description: '救助孤寡老人' },
        { cycle: 13, type: 'achievement', description: '建桥修路' },
        { cycle: 16, type: 'achievement', description: '舍身救人' }
      ]
    },
    S002: {
      soulId: 'S002',
      name: '李四',
      totalCycles: 15,
      currentKarma: 25,
      initialKarma: 8,
      peakKarma: 35,
      ascendingCycles: 8,
      descendingCycles: 7,
      progressScore: 35,
      karmaTrend: [8, 5, 12, 18, 15, 22, 19, 25, 28, 22, 18, 15, 12, 20, 25],
      milestones: [
        { cycle: 3, type: 'setback', description: '地狱重罪' },
        { cycle: 8, type: 'achievement', description: '开始偿还业债' },
        { cycle: 12, type: 'setback', description: '再次犯错' },
        { cycle: 15, type: 'achievement', description: '勤劳耕作' }
      ]
    },
    S003: {
      soulId: 'S003',
      name: '王五',
      totalCycles: 23,
      currentKarma: 68,
      initialKarma: 55,
      peakKarma: 79,
      ascendingCycles: 15,
      descendingCycles: 8,
      progressScore: 72,
      karmaTrend: [55, 58, 62, 59, 65, 68, 71, 75, 73, 79, 76, 72, 68, 71, 69, 66, 70, 73, 69, 65, 68, 71, 68],
      milestones: [
        { cycle: 8, type: 'achievement', description: '修罗战神' },
        { cycle: 15, type: 'setback', description: '嗔怒过重' },
        { cycle: 20, type: 'achievement', description: '文学造诣' },
        { cycle: 23, type: 'achievement', description: '教书育人' }
      ]
    },
    S004: {
      soulId: 'S004',
      name: '赵六',
      totalCycles: 31,
      currentKarma: 82,
      initialKarma: 25,
      peakKarma: 85,
      ascendingCycles: 26,
      descendingCycles: 5,
      progressScore: 89,
      karmaTrend: [25, 28, 35, 42, 45, 48, 52, 55, 58, 62, 65, 68, 71, 74, 77, 80, 78, 75, 79, 82, 85, 83, 80, 82, 84, 81, 83, 85, 82, 84, 82],
      milestones: [
        { cycle: 10, type: 'achievement', description: '灵性觉醒' },
        { cycle: 20, type: 'achievement', description: '武僧修行' },
        { cycle: 25, type: 'achievement', description: '降妖除魔' },
        { cycle: 31, type: 'achievement', description: '坐化圆寂' }
      ]
    },
    S005: {
      soulId: 'S005',
      name: '孙七',
      totalCycles: 7,
      currentKarma: 35,
      initialKarma: 12,
      peakKarma: 38,
      ascendingCycles: 5,
      descendingCycles: 2,
      progressScore: 45,
      karmaTrend: [12, 15, 18, 22, 28, 35, 38],
      milestones: [
        { cycle: 2, type: 'setback', description: '贪婪成性' },
        { cycle: 5, type: 'achievement', description: '忠心护主' },
        { cycle: 7, type: 'achievement', description: '与人为善' }
      ]
    },
    S006: {
      soulId: 'S006',
      name: '周八',
      totalCycles: 19,
      currentKarma: 79,
      initialKarma: 52,
      peakKarma: 82,
      ascendingCycles: 16,
      descendingCycles: 3,
      progressScore: 85,
      karmaTrend: [52, 55, 58, 61, 64, 67, 70, 73, 76, 79, 82, 78, 75, 78, 81, 79, 76, 78, 79],
      milestones: [
        { cycle: 8, type: 'achievement', description: '保家卫国' },
        { cycle: 15, type: 'achievement', description: '爱兵如子' },
        { cycle: 19, type: 'achievement', description: '战死沙场' }
      ]
    },
    S007: {
      soulId: 'S007',
      name: '吴九',
      totalCycles: 42,
      currentKarma: 91,
      initialKarma: 78,
      peakKarma: 98,
      ascendingCycles: 35,
      descendingCycles: 7,
      progressScore: 95,
      karmaTrend: [78, 80, 82, 85, 87, 89, 91, 93, 95, 98, 96, 94, 92, 94, 96, 95, 93, 91, 93, 95, 97, 95, 93, 91, 93, 95, 92, 90, 88, 90, 92, 94, 91, 89, 87, 89, 91, 93, 91, 89, 91, 91],
      milestones: [
        { cycle: 10, type: 'achievement', description: '天界功德圆满' },
        { cycle: 25, type: 'achievement', description: '悬壶济世' },
        { cycle: 35, type: 'achievement', description: '医术精湛' },
        { cycle: 42, type: 'achievement', description: '功德圆满' }
      ]
    },
    S008: {
      soulId: 'S008',
      name: '郑十',
      totalCycles: 5,
      currentKarma: 8,
      initialKarma: 45,
      peakKarma: 45,
      ascendingCycles: 0,
      descendingCycles: 5,
      progressScore: 15,
      karmaTrend: [45, 35, 25, 15, 8],
      milestones: [
        { cycle: 2, type: 'setback', description: '开始贪污' },
        { cycle: 4, type: 'setback', description: '罪恶深重' },
        { cycle: 5, type: 'setback', description: '堕入饿鬼道' }
      ]
    },
    S009: {
      soulId: 'S009',
      name: '何十一',
      totalCycles: 28,
      currentKarma: 96,
      initialKarma: 58,
      peakKarma: 96,
      ascendingCycles: 25,
      descendingCycles: 3,
      progressScore: 93,
      karmaTrend: [58, 62, 65, 68, 71, 74, 77, 80, 83, 86, 89, 91, 88, 85, 87, 90, 92, 94, 91, 88, 90, 92, 94, 96, 95, 93, 95, 96],
      milestones: [
        { cycle: 10, type: 'achievement', description: '慈善事业起步' },
        { cycle: 18, type: 'achievement', description: '建立孤儿院' },
        { cycle: 25, type: 'achievement', description: '医院建设' },
        { cycle: 28, type: 'achievement', description: '升入天道' }
      ]
    },
    S010: {
      soulId: 'S010',
      name: '钱十二',
      totalCycles: 12,
      currentKarma: 58,
      initialKarma: 35,
      peakKarma: 62,
      ascendingCycles: 9,
      descendingCycles: 3,
      progressScore: 68,
      karmaTrend: [35, 38, 42, 45, 48, 52, 55, 58, 62, 59, 56, 58],
      milestones: [
        { cycle: 5, type: 'achievement', description: '灵性觉醒' },
        { cycle: 8, type: 'achievement', description: '救助迷人' },
        { cycle: 12, type: 'achievement', description: '山林守护' }
      ]
    }
  }
  return progressData[soulId] || null
}

// 获取指定生灵的修行评分
const getRecordProgressScore = (soulId) => {
  const progress = getRecordProgress(soulId)
  return progress ? progress.progressScore : 50
}
</script>

<style lang="scss" scoped>
.history-management {
  padding: 0;

  // 页面头部
  .page-header {
    margin-bottom: 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;

    .header-nav {
      margin-bottom: 24px;

      .nav-left {
        display: flex;
        align-items: center;
        gap: 24px;
      }

      .back-btn {
        color: $text-secondary;
        padding: 6px 12px;
        height: auto;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        border-radius: 6px;
        transition: all 0.2s ease;

        span {
          font-weight: 500;
        }
      }

      .breadcrumb {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin: 0;

        .breadcrumb-item {
          display: flex;
          align-items: center;
          gap: 6px;
          color: $text-secondary;
          text-decoration: none;
          line-height: 14px;
          height: 14px;

          &:hover {
            color: $primary-color;
          }

          &.current {
            color: $text-primary;
            cursor: default;
          }

          span {
            line-height: 14px;
            height: 14px;
            display: flex;
            align-items: center;
          }
        }

        .breadcrumb-separator {
          color: $text-tertiary;
          margin: 0 8px;
          line-height: 14px;
          height: 14px;
          display: flex;
          align-items: center;
        }
      }
    }

    .header-content {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;

      .header-main {
        .page-title {
          font-size: 28px;
          font-weight: 600;
          color: $text-primary;
          margin: 0 0 8px 0;
          line-height: 1.2;
        }

        .page-description {
          font-size: 14px;
          color: $text-secondary;
          margin: 0;
          line-height: 1.4;
        }
      }

      .header-actions {
        display: flex;
        gap: 12px;

        .ant-btn {
          height: 36px;
          padding: 0 16px;
          border-radius: 6px;
          font-size: 14px;
          transition: all 0.2s ease;

          &:hover {
            transform: translateY(-1px);
          }
        }
      }
    }
  }

  // 统计概览
  .stats-overview {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      height: 100px;

      .stat-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, $primary-color, $secondary-color);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        margin-right: 16px;
      }

      .stat-content {
        flex: 1;

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: $text-primary;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 14px;
          color: $text-secondary;
        }
      }
    }
  }

  // 内容标签页
  .content-tabs {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(10px);

    :deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
      color: $text-secondary;
    }

    :deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active) {
      background: rgba(114, 46, 209, 0.2);
      border-color: $primary-color;
      color: $text-primary;
    }

    .tab-content {
      padding-top: 24px;
    }
  }

  // 筛选器
  .filters {
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  // 记录列表
  .records-list {
    .record-item {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 16px;

      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .soul-info {
          display: flex;
          align-items: center;

          .soul-avatar {
            margin-right: 16px;
          }

          .soul-details {
            .soul-name {
              font-size: 18px;
              font-weight: 600;
              color: $text-primary;
              margin-bottom: 4px;
            }

            .soul-id {
              font-size: 12px;
              color: $text-tertiary;
            }
          }
        }

        .record-meta {
          text-align: right;

          .cycle-info {
            font-size: 16px;
            font-weight: 600;
            color: $primary-color;
            margin-bottom: 4px;
          }

          .record-time {
            font-size: 12px;
            color: $text-tertiary;
          }
        }
      }

      .record-content {
        .life-journey {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          padding: 16px;
          background: rgba(255, 255, 255, 0.03);
          border-radius: 8px;

          .journey-step {
            display: flex;
            align-items: center;
            flex: 1;

            .step-icon {
              width: 48px;
              height: 48px;
              border-radius: 12px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              font-size: 18px;
              margin-right: 12px;
            }

            .step-content {
              .step-title {
                font-size: 12px;
                color: $text-tertiary;
                margin-bottom: 4px;
              }

              .step-details {
                font-size: 14px;
                color: $text-primary;
                margin-bottom: 2px;
              }

              .step-karma {
                font-size: 12px;
                color: $text-secondary;
              }
            }
          }

          .journey-arrow {
            padding: 0 16px;
            color: $primary-color;
            font-size: 18px;
          }
        }

        .record-details {
          .detail-item {
            display: flex;
            margin-bottom: 8px;
            font-size: 13px;

            .detail-label {
              color: $text-tertiary;
              width: 80px;
              flex-shrink: 0;
            }

            .detail-value {
              color: $text-primary;

              &.positive {
                color: #52c41a;
              }

              &.negative {
                color: #ff4d4f;
              }
            }
          }
        }
      }

      .record-actions {
        display: flex;
        gap: 8px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
      }
    }
  }

  // 关系网络
  .relationship-network {
    .network-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      h4 {
        color: $text-primary;
        margin: 0;
      }
    }

    .relationship-tree {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;

      .tree-node {
        .node-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 8px;
          padding: 16px;
          display: flex;
          align-items: center;
          min-width: 200px;

          .node-avatar {
            margin-right: 12px;
          }

          .node-info {
            .node-name {
              font-size: 14px;
              font-weight: 600;
              color: $text-primary;
              margin-bottom: 4px;
            }

            .node-relation {
              font-size: 12px;
              color: $text-secondary;
              margin-bottom: 2px;
            }

            .node-cycles {
              font-size: 11px;
              color: $text-tertiary;
              margin-bottom: 2px;
            }

            .node-karma {
              font-size: 11px;
              color: $secondary-color;
              margin-bottom: 4px;
            }

            .node-description {
              font-size: 10px;
              color: $text-tertiary;
              line-height: 1.3;
              max-width: 150px;
            }
          }
        }
      }
    }
  }

  // 统计部分
  .stat-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;

    h4 {
      color: $text-primary;
      margin-bottom: 16px;
    }

    .cycle-distribution {
      .dist-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        .dist-label {
          width: 60px;
          font-size: 12px;
          color: $text-secondary;
        }

        .dist-bar {
          flex: 1;
          height: 8px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px;
          margin: 0 12px;
          overflow: hidden;

          .bar-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease;
          }
        }

        .dist-value {
          font-size: 12px;
          color: $text-primary;
          width: 120px;
          text-align: right;
        }
      }
    }

    .realm-transitions {
      .transition-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        .transition-path {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 13px;

          .transition-arrow {
            color: $text-tertiary;
          }
        }

        .transition-count {
          font-size: 12px;
          color: $text-secondary;
        }

        .transition-rate {
          font-size: 12px;
          color: $text-primary;
          font-weight: 600;
        }
      }
    }
  }

  // 修行进度
  .progress-tracking {
    .progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      h4 {
        color: $text-primary;
        margin: 0;
      }
    }

    .progress-list {
      .progress-item {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 16px;

        .progress-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;

          .soul-info {
            display: flex;
            align-items: center;

            .soul-details {
              margin-left: 12px;

              .soul-name {
                font-size: 16px;
                font-weight: 600;
                color: $text-primary;
                margin-bottom: 4px;
              }

              .soul-stats {
                font-size: 12px;
                color: $text-secondary;
              }
            }
          }

          .progress-score {
            text-align: center;

            .score-value {
              font-size: 24px;
              font-weight: bold;
              margin-bottom: 4px;

              &.excellent {
                color: #d4990a;
              }

              &.good {
                color: #52c41a;
              }

              &.average {
                color: #fa8c16;
              }

              &.poor {
                color: #ff4d4f;
              }
            }

            .score-label {
              font-size: 12px;
              color: $text-tertiary;
            }
          }
        }

        .progress-content {
          display: flex;
          gap: 24px;
          margin-bottom: 16px;

          .karma-trend {
            flex: 1;

            .trend-label {
              font-size: 13px;
              color: $text-secondary;
              margin-bottom: 8px;
            }

            .trend-chart {
              display: flex;
              align-items: end;
              gap: 4px;
              height: 60px;

              .trend-point {
                width: 12px;
                border-radius: 2px;
                cursor: pointer;
                transition: all 0.2s ease;
              }
            }
          }

          .progress-details {
            .detail-row {
              display: flex;
              justify-content: space-between;
              margin-bottom: 6px;
              font-size: 12px;

              .detail-label {
                color: $text-tertiary;
              }

              .detail-value {
                color: $text-primary;

                &.highlight {
                  color: $secondary-color;
                  font-weight: 600;
                }

                &.success {
                  color: #52c41a;
                }

                &.warning {
                  color: #fa8c16;
                }
              }
            }
          }
        }

        .progress-milestones {
          .milestones-label {
            font-size: 13px;
            color: $text-secondary;
            margin-bottom: 8px;
          }

          .milestones-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
          }
        }
      }
    }
  }
}

// 关键帧动画
@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

// 响应式适配
@media (max-width: 768px) {
  .history-management {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }

    .progress-content {
      flex-direction: column !important;
      gap: 16px !important;
    }

    .life-journey {
      flex-direction: column !important;
      gap: 16px;

      .journey-arrow {
        transform: rotate(90deg);
      }
    }
  }
}

// 生灵组样式
.soul-group {
  margin-bottom: 32px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;

  .soul-center {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;

    .center-card {
      display: flex;
      align-items: center;
      padding: 16px 24px;
      background: rgba(114, 46, 209, 0.1);
      border-radius: 12px;

      .center-avatar {
        margin-right: 16px;
      }

      .center-info {
        text-align: left;

        .center-name {
          font-size: 20px;
          font-weight: 600;
          color: $text-primary;
          margin-bottom: 4px;
        }

        .center-id {
          font-size: 12px;
          color: $text-tertiary;
          margin-bottom: 2px;
        }

        .center-karma {
          font-size: 13px;
          color: $secondary-color;
          margin-bottom: 2px;
        }

        .center-cycles {
          font-size: 13px;
          color: $text-secondary;
        }
      }
    }
  }

  .relationships-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }

  // 弹窗样式
  :deep(.ant-modal) {
    .ant-modal-header {
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ant-modal-content {
      background: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
    }

    .ant-modal-body {
      padding: 24px;
    }
  }

  .detail-modal-content {
    .detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      .soul-basic-info {
        display: flex;
        align-items: center;
        gap: 16px;

        .basic-details {
          h3 {
            margin: 0 0 8px 0;
            color: $text-primary;
            font-size: 18px;
          }

          .cycle-info,
          .karma-info {
            color: $text-secondary;
            font-size: 14px;
            margin-bottom: 4px;
          }
        }
      }

      .reincarnation-time {
        color: $text-secondary;
        font-size: 14px;
      }
    }

    .detail-sections {
      .detail-section {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 16px;
        height: 100%;

        h4 {
          margin: 0 0 16px 0;
          color: $primary-color;
          font-size: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .section-content {
          .info-item {
            display: flex;
            margin-bottom: 12px;

            .info-label {
              color: $text-secondary;
              width: 80px;
              flex-shrink: 0;
            }

            .info-value {
              color: $text-primary;
            }
          }

          .achievements-list,
          .relationships-list {
            .ant-tag {
              margin-bottom: 8px;
            }
          }

          .relation-item {
            color: $text-primary;
            margin-bottom: 8px;
            padding: 8px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
          }

          .no-data {
            color: $text-disabled;
            font-style: italic;
          }
        }
      }
    }
  }
}
.relationship-modal-content {
  .modal-header {
    background: linear-gradient(135deg, rgba(114, 46, 209, 0.25), rgba(212, 153, 10, 0.15), rgba(114, 46, 209, 0.15));
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 40px;
    border: 1px solid rgba(114, 46, 209, 0.4);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
      animation: shimmer 3s infinite;
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="lines" patternUnits="userSpaceOnUse" width="2" height="2"><path d="M0,0 L2,2 M2,0 L0,2" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23lines)"/></svg>');
      z-index: -1;
    }

    .soul-info {
      display: flex;
      align-items: center;
      gap: 24px;
      z-index: 1;
      position: relative;

      .soul-details {
        h3 {
          margin: 0 0 12px 0;
          color: $text-primary;
          font-size: 24px;
          font-weight: 800;
          text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
          background: linear-gradient(45deg, #ffffff, #d4990a);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .soul-meta {
          color: $text-secondary;
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
      }
    }
  }

  .network-display {
    .relationship-tree {
      .center-soul {
        display: flex;
        justify-content: center;
        margin-bottom: 64px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 400px;
          height: 400px;
          background: radial-gradient(circle at 30% 30%, rgba(114, 46, 209, 0.15), transparent 50%), radial-gradient(circle at 70% 70%, rgba(212, 153, 10, 0.1), transparent 50%);
          border-radius: 50%;
          animation: pulse 4s infinite;
          z-index: -1;
        }

        .center-card {
          text-align: center;
          padding: 40px 32px;
          background: linear-gradient(145deg, rgba(114, 46, 209, 0.3), rgba(212, 153, 10, 0.2), rgba(114, 46, 209, 0.25)), linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
          border: 4px solid transparent;
          border-radius: 24px;
          box-shadow: 0 16px 48px rgba(114, 46, 209, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
          backdrop-filter: blur(20px);
          position: relative;
          overflow: hidden;
          transform: perspective(1000px) rotateX(5deg);
          transition: transform 0.3s ease;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            animation: shimmer 3s infinite;
          }

          .center-name {
            margin-top: 20px;
            color: $text-primary;
            font-weight: 800;
            font-size: 22px;
            text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
            background: linear-gradient(45deg, #ffffff, #d4990a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          }
        }
      }

      .connected-souls {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: 40px;

        .relationship-node {
          position: relative;

          .connection-line {
            position: absolute;
            top: -32px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 32px;
            background: linear-gradient(to bottom, $primary-color 0%, rgba(114, 46, 209, 0.8) 25%, rgba(212, 153, 10, 0.6) 75%, rgba(114, 46, 209, 0.3) 100%);
            border-radius: 3px;
            box-shadow: 0 0 16px rgba(114, 46, 209, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);

            &::before {
              content: '';
              position: absolute;
              top: -8px;
              left: 50%;
              transform: translateX(-50%);
              width: 12px;
              height: 12px;
              background: linear-gradient(45deg, $primary-color, $secondary-color);
              border-radius: 50%;
              box-shadow: 0 0 16px rgba(114, 46, 209, 0.8), 0 0 8px rgba(212, 153, 10, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
              animation: pulse 2s infinite;
            }

            &::after {
              content: '';
              position: absolute;
              bottom: -8px;
              left: 50%;
              transform: translateX(-50%);
              width: 10px;
              height: 10px;
              background: linear-gradient(45deg, rgba(114, 46, 209, 0.4), rgba(212, 153, 10, 0.3));
              border-radius: 50%;
              box-shadow: 0 0 12px rgba(114, 46, 209, 0.5);
            }
          }

          .node-card {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            padding: 24px;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)), linear-gradient(45deg, rgba(114, 46, 209, 0.05), transparent);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(15px);
            position: relative;
            overflow: hidden;
            transform: perspective(1000px) rotateX(2deg);

            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              height: 3px;
              background: linear-gradient(90deg, $primary-color, $secondary-color, $primary-color);
              opacity: 0;
              transition: opacity 0.3s ease;
            }

            &::after {
              content: '';
              position: absolute;
              bottom: -2px;
              left: 10%;
              right: 10%;
              height: 20px;
              background: radial-gradient(ellipse, rgba(114, 46, 209, 0.3), transparent);
              border-radius: 50%;
              opacity: 0;
              transition: opacity 0.3s ease;
            }

            .node-info {
              flex: 1;

              .node-name {
                color: $text-primary;
                font-weight: 800;
                font-size: 18px;
                margin-bottom: 8px;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
                background: linear-gradient(45deg, #ffffff, rgba(212, 153, 10, 0.8));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
              }

              .node-relation {
                color: $primary-color;
                font-size: 15px;
                font-weight: 700;
                margin-bottom: 12px;
                padding: 6px 16px;
                background: linear-gradient(45deg, rgba(114, 46, 209, 0.2), rgba(212, 153, 10, 0.1)), linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
                border-radius: 16px;
                display: inline-block;
                border: 1px solid rgba(114, 46, 209, 0.4);
                box-shadow: 0 4px 12px rgba(114, 46, 209, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
                position: relative;
                overflow: hidden;

                &::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  left: -100%;
                  width: 100%;
                  height: 100%;
                  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                  transition: left 0.5s ease;
                }

                &:hover::before {
                  left: 100%;
                }
              }

              .node-shared,
              .node-karma {
                color: $text-secondary;
                font-size: 14px;
                margin-bottom: 6px;
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 500;

                &::before {
                  content: '◆';
                  font-size: 10px;
                  color: $secondary-color;
                  text-shadow: 0 0 8px currentColor;
                }
              }

              .node-description {
                color: $text-tertiary;
                font-size: 14px;
                margin-top: 16px;
                font-style: italic;
                line-height: 1.6;
                padding: 12px 16px;
                background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)), linear-gradient(45deg, rgba(212, 153, 10, 0.1), transparent);
                border-radius: 12px;
                border-left: 4px solid rgba(212, 153, 10, 0.6);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
                position: relative;

                &::before {
                  content: '"';
                  position: absolute;
                  top: 8px;
                  left: 8px;
                  font-size: 20px;
                  color: rgba(212, 153, 10, 0.4);
                  font-family: serif;
                }

                &::after {
                  content: '"';
                  position: absolute;
                  bottom: 8px;
                  right: 8px;
                  font-size: 20px;
                  color: rgba(212, 153, 10, 0.4);
                  font-family: serif;
                }
              }
            }
          }
        }
      }
    }
  }
}

.progress-modal-content {
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    background: linear-gradient(135deg, rgba(114, 46, 209, 0.25), rgba(212, 153, 10, 0.15), rgba(114, 46, 209, 0.2)), linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 24px;
    padding: 36px;
    border: 1px solid rgba(114, 46, 209, 0.4);
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(114, 46, 209, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2);

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
      animation: shimmer 4s infinite;
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" patternUnits="userSpaceOnUse" width="8" height="8"><circle cx="4" cy="4" r="1" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
      z-index: -1;
    }

    .soul-info {
      display: flex;
      align-items: center;
      gap: 24px;
      z-index: 1;
      position: relative;

      .soul-details {
        h3 {
          margin: 0 0 12px 0;
          color: $text-primary;
          font-size: 24px;
          font-weight: 800;
          text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
          background: linear-gradient(45deg, #ffffff, #d4990a);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .soul-meta {
          color: $text-secondary;
          font-size: 16px;
          opacity: 0.95;
          font-weight: 500;
        }
      }
    }

    .progress-score {
      text-align: center;
      position: relative;
      z-index: 1;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, rgba(114, 46, 209, 0.3), transparent 60%), radial-gradient(circle at 70% 70%, rgba(212, 153, 10, 0.2), transparent 60%);
        animation: pulse 3s infinite;
        z-index: -1;
      }

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 120px;
        border: 2px solid rgba(114, 46, 209, 0.3);
        border-radius: 50%;
        border-top-color: $primary-color;
        border-right-color: $secondary-color;
        z-index: -1;
      }

      .score-value {
        font-size: 64px;
        font-weight: 900;
        margin-bottom: 12px;
        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
        position: relative;
        filter: drop-shadow(0 0 20px currentColor);

        &.excellent {
          background: linear-gradient(45deg, #d4990a, #ffd700, #d4990a);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          background-size: 200% 200%;
          animation: shimmer-gradient 3s ease-in-out infinite;
        }
        &.good {
          background: linear-gradient(45deg, #52c41a, #73d13d, #52c41a);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          background-size: 200% 200%;
          animation: shimmer-gradient 3s ease-in-out infinite;
        }
        &.average {
          background: linear-gradient(45deg, #1890ff, #40a9ff, #1890ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          background-size: 200% 200%;
          animation: shimmer-gradient 3s ease-in-out infinite;
        }
        &.poor {
          background: linear-gradient(45deg, #f5222d, #ff4d4f, #f5222d);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          background-size: 200% 200%;
          animation: shimmer-gradient 3s ease-in-out infinite;
        }
      }

      .score-label {
        color: $text-secondary;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }
    }
  }

  .progress-details {
    .progress-overview {
      margin-bottom: 48px;

      .overview-item {
        text-align: center;
        padding: 32px 24px;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)), linear-gradient(45deg, rgba(114, 46, 209, 0.08), transparent);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(15px);
        position: relative;
        overflow: hidden;
        transform: perspective(1000px) rotateX(2deg);

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(90deg, $primary-color, $secondary-color, $primary-color);
          opacity: 0;
          transition: opacity 0.3s ease;
          border-radius: 20px 20px 0 0;
        }

        &::after {
          content: '';
          position: absolute;
          bottom: -3px;
          left: 15%;
          right: 15%;
          height: 25px;
          background: radial-gradient(ellipse, rgba(114, 46, 209, 0.4), transparent);
          border-radius: 50%;
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        .item-value {
          font-size: 36px;
          font-weight: 900;
          color: $text-primary;
          margin-bottom: 16px;
          text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
          position: relative;
          filter: drop-shadow(0 0 12px rgba(114, 46, 209, 0.3));

          &.highlight {
            background: linear-gradient(45deg, $primary-color, $secondary-color, $primary-color);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            background-size: 200% 200%;
            animation: shimmer-gradient 2s ease-in-out infinite;
          }
        }

        .item-label {
          color: $text-secondary;
          font-size: 14px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
      }
    }

    .karma-trend-section {
      margin-bottom: 40px;

      h4 {
        margin-bottom: 20px;
        color: $primary-color;
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 12px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }

      .trend-chart {
        display: flex;
        align-items: flex-end;
        gap: 3px;
        height: 120px;
        padding: 24px;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(114, 46, 209, 0.5), transparent);
        }

        .trend-point {
          width: 12px;
          min-height: 6px;
          border-radius: 6px;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          cursor: pointer;
          position: relative;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            background: inherit;
            border-radius: 50%;
            transition: all 0.3s ease;
          }
        }
      }
    }

    .milestones-section {
      margin-bottom: 40px;

      h4 {
        margin-bottom: 20px;
        color: $primary-color;
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 12px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }

      .milestones-timeline {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 20px;
          top: 0;
          bottom: 0;
          width: 2px;
          background: linear-gradient(to bottom, $primary-color, rgba(114, 46, 209, 0.3));
          border-radius: 1px;
        }

        .milestone-item {
          display: flex;
          align-items: center;
          gap: 20px;
          margin-bottom: 16px;
          padding: 20px;
          background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
          border: 1px solid rgba(255, 255, 255, 0.15);
          border-radius: 16px;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          backdrop-filter: blur(10px);
          position: relative;
          margin-left: 40px;

          &::before {
            content: '';
            position: absolute;
            left: -30px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            background: $primary-color;
            border-radius: 50%;
            border: 3px solid rgba(0, 0, 0, 0.9);
            box-shadow: 0 0 12px rgba(114, 46, 209, 0.8);
          }

          .milestone-cycle {
            color: $secondary-color;
            font-size: 16px;
            font-weight: 700;
            width: 100px;
            flex-shrink: 0;
            text-align: center;
            padding: 8px 12px;
            background: rgba(212, 153, 10, 0.15);
            border-radius: 8px;
            border: 1px solid rgba(212, 153, 10, 0.3);
          }

          .milestone-content {
            flex: 1;
            color: $text-primary;
            font-size: 14px;
            line-height: 1.5;
          }
        }
      }
    }

    .progress-stats {
      .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;

        .stat-label {
          color: $text-secondary;
          font-weight: 600;
        }

        .stat-value {
          font-weight: 700;
          font-size: 16px;

          &.success {
            color: #52c41a;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          }
          &.warning {
            color: #fa8c16;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          }
        }
      }
    }
  }
}
</style>
